Vditor 使用体验纪要

本贴最后更新于 1782 天前,其中的信息可能已经天翻地覆

故事背景

蛮早期就有关注到由黑客派所出品的 Vditor:一款为未来而构建的下一代 Markdown 编辑器。然,现而今市面上所存在的 Markdown 编辑器,或多或少都存在一些问题(或功能不全,或高级功能收费...),因此基于自身所需,加之 Vditor 的强大,就诞生了做一款在线 Markdown 编辑器的念头;取其名曰:Arya,个中原由,有在观《权利的游戏》感记一文有做记载。

最近因为频繁用到关于 Markdown,就断续利用一些业余时间,基于 VueVditor,将之前的想法给实践了下。这便是现在的 Arya - 在线 Markdown 编辑器;关于 Arya 的更多讯息,有在 https://hacpai.com/article/1558270349379 这一帖子中加以陈述;新开这篇帖子,在于记录一些关于 Vditor 使用的一些体验感受(陆续陆续记录 @Vanessa )。

  • 预览:这边想实现 About Arya 页面,翻越了 https://hacpai.com/article/1549638745630 ,并没有发现相关功能设定,就只好在页面渲染完毕后,将 Textarea 给隐藏来实现,代码见: markdown-online-editor;这相对会比较麻烦些,如果自带这个功能就更好了。
  • 编辑器左侧 md 语法高亮:有用户提到想要这个功能,个人觉得这个也是蛮有用,且会极大提升使用体验; @Vanessa 可以考虑注入这个功能么?(目前编辑区域基于 textarea 的话,不太好实现这个功能)。
  • 表格中代办事项:在有些场景下,表格中加入 代办事项 的功能,还是蛮有用的;目前看来是没有做解析,是不是可以考虑加上呢( @Vanessa ),如下语法示例:
| TODO | DOING | DONE |
| :---: | :---: | :---:  |
| - [ ] TODO | - [ ] DOING | - [x] DONE |
TODO DOING DONE
- [ ] TODO - [ ] DOING - [x] DONE
2 操作
jeffjade 在 2019-06-11 22:54:37 更新了该帖
jeffjade 在 2019-05-30 23:32:45 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 你看一下 https://hacpai.com/article/1549638745630#toc_h3_13 的静态方法,这样就不用去渲染编辑器了。

    • 使用 md2html 把 md 转换为 html
    • 使用 mathRender 转换数学公式
    • 使用 mermaidRender 转换图表
    • 使用 codeRender 为代码添加复制功能
    2 回复
  • jeffjade
    作者

    Wow,好的,我回去抽空体验下 👍👍👍。

  • jeffjade
    作者

    话说例如 md2html 这些静态方法,该如何使用呢?(查看了文档 & 粗略的看了下源码,并没有发现更多讯息来告知如何使用这个静态方法 😂 )。

    1 回复
  • 直接 Vditor.md2html('#hi')

    2 回复
  • jeffjade
    作者

    嗯,其实一上来,就有如此试过,但会报错:“vditor__WEBPACK_IMPORTED_MODULE_0___default.a.md2html is not a function”,所以~

    "vditor": "^1.3.5",

    我方才看了下,npm 上的版本已经到 1.4.4 了,我更新下看看(昨晚看 github releases 上的版本才 1.3.5)。

    1 回复
  • jeffjade
    作者

    嗯,果然是版本没跟上所致;更新到 1.4,4 可以了(建议可以在说明中,为属性 or 方法,加上对应的支持版本信息)。

    不过,会有如下一个报错;
    image.png
    可看了下源码, $toolTipBg 这个 css 变量是有定义的~

  • GitHub 上凑足几个 issue 才会 release 一个版本。$tooltipBg 这个改过大小写 trollface

    1 回复
  • jeffjade
    作者

    原来如此,了解了 👌 。$tooltipBg 这个变量,我这边使用时小做兼容下就好了。

  • jeffjade
    作者

    @Vanessa 受这个仓库的启发,markvis,Vditor 是不是也可以注入这些功能(暴露接口出来),使得用户可以在 markdown 中进行可视化呢。

    1 回复
  • 不错呀,vditor 现在还不支持 chart 呢。话说我可以不用查看其他的,直接使用你给的这个 markvis 么?

    1 回复
    2 操作
    Vanessa 在 2019-05-31 18:48:05 更新了该回帖
    Vanessa 在 2019-05-31 18:47:43 更新了该回帖
  • jeffjade 1
    作者

    我觉得这个,看起来还可以(当然,目前还没遇到过更多类似的封装)。

  • jeffjade
    作者

    编辑器左侧 md 语法高亮:有用户提到想要这个功能,个人觉得这个也是蛮有用,且会极大提升使用体验; @Vanessa 可以考虑注入这个功能么?(目前编辑区域基于 textarea 的话,不太好实现这个功能)。

    1 回复
  • 呃。这样的话可能要重新写了,多选什么的也就可以了。当初看了 GitHub 的 issue 也是个 textarea,然后就。。。。

    1 回复
  • jeffjade 1 评论
    作者

    嗯,那目前是如何计划的呢?❤️

    目前继续做小需求和细节完善。换 textarea 估计要下个月了
    Vanessa
  • DeskZq

    请问 Vditor 可以自定义 Markdown Css 样式么?

    1 回复
  • 88250

    实现 GFM 规范的 Markdown 解析器应该都不支持 表格中待办事项。因为表格虽然是块级元素但不是块容器,所以它不能容纳其他块级元素:

    Block-level elements cannot be inserted in a table

    具体规范细节可参考这里

    1 回复
  • markdown css 语法是什么?

  • jeffjade 1
    作者

    嗯嗯,如果费点气力的话,可以考虑用 Div 实现表格,应该就可以实现这个功能了。当然,这个功能并不是刚需,可以优先更加有意义的功能。

    1 操作
    jeffjade 在 2019-08-11 17:40:54 更新了该回帖
  • SXX19950910

    嘿嘿嘿

    1 回复
  • jeffjade
    作者

    ✋ 🤝 😋

  • huaxie2017 1 评论

    请问我调用 setValue('11')报错15737851791122.jpg

    你是紧接着 new 方法后调用么?如果是需要在 options.after 中进行调用
    Vanessa
  • huaxie2017

    是在编辑器初始化之后 其他操作需要给编辑器设置内容

  • huaxie2017

    大佬 我想请教下 编辑器编辑的文本保存后 怎么在页面上渲染出来呢

    1 回复
  • jeffjade
    作者

    指的是用 Vditor 么? “怎么在页面上渲染出来呢”,对于这句我可能没弄明白(Vditor 是可以直接渲染出来的)。

    1 回复
  • huaxie2017

    我的意思是编辑器提交的文本 需要在页面上输出 用的是 preview 在页面显示的内容

    1 回复
  • jeffjade
    作者

    意思是像这样个页面: https://markdown.lovejade.cn/about-arya ,只显示 Preview 内容,而不展示其他是么?

    如果是这样的话,我这边采取的办法是隐藏 Vditor 的 textarea,具体代码见:https://github.com/nicejade/markdown-online-editor/blob/15a3492a2ad19c0d902d47563a2611e2a5d8f55c/src/helper/utils.js#L93-L113

    1 回复
  • huaxie2017

    是的 保存的内容在页面渲染出来 已解决 谢谢大佬

    1 回复
  • jeffjade
    作者

    好的。 🤝 🤝

请输入回帖内容 ...
jeffjade
在职程序员,晚晴幽草轩轩主,倾城之链开发者 深圳

推荐标签 标签

  • 996
    13 引用 • 200 回帖
  • 自由行
    2 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 113 回帖 • 312 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 626 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    76 引用 • 37 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 9 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 27 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 6 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 3 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 511 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    129 引用 • 793 回帖 • 1 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 545 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1083 引用 • 3461 回帖 • 286 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 126 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 54 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 238 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    60 引用 • 287 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 92 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • abitmean

    有点意思就行了

    24 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 345 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 512 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 295 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 40 关注