Vditor 使用体验纪要

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

故事背景

蛮早期就有关注到由黑客派所出品的 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
在职程序员,晚晴幽草轩轩主,倾城之链开发者 深圳

推荐标签 标签

  • abitmean

    有点意思就行了

    38 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 10 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    207 引用 • 358 回帖
  • Chrome

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

    62 引用 • 289 回帖
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    164 引用 • 594 回帖 • 3 关注
  • BookxNote

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

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

    1 引用 • 1 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖 • 2 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    14 引用 • 7 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    90 引用 • 383 回帖 • 4 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 3 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    54 引用 • 85 回帖 • 1 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 1 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1056 回帖 • 1 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4599 回帖 • 700 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    51 引用 • 37 回帖 • 3 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    5 引用 • 13 回帖 • 1 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    76 引用 • 429 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖 • 1 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 158 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖 • 5 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 498 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 441 关注