故事背景 蛮早期就有关注到由[链接]所出品的 [链接]:一款为未来而构建的下一代 [链接] 编辑器。然,现而今市面上所存在的 [链接] 编辑器,或多或少都存在一些问题(或功能不全,或高级功能收费。..),因此基于自身所需,加之 [链接] 的强大,就诞生了做一款[链接]的念头;取其名曰:Arya,个中原由,有在[链接]一 ..

Vditor 使用体验纪要

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

故事背景

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

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

| TODO | DOING | DONE |
| :---: | :---: | :---:  |
| - [ ] TODO | - [ ] DOING | - [x] DONE |
TODO DOING DONE
- [ ] TODO - [ ] DOING - [x] DONE
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,使用 TypeScript 实现。

    30 引用 • 356 回帖 • 12 关注
2 操作
jeffjade 在 2019-05-30 23:32:45 更新了该帖
jeffjade 在 2019-06-11 22:54:37 更新了该帖
28 回帖
请输入回帖内容...
  • Vanessa 1

    你看一下 Vditor - 浏览器端的 Markdown 编辑器 的静态方法,这样就不用去渲染编辑器了。

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

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

  • jeffjade

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

    1 回复
  • Vanessa

    直接 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 变量是有定义的 ~

  • Vanessa

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

    1 回复
  • jeffjade

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

  • jeffjade

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

    1 回复
  • Vanessa

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

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

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

  • jeffjade

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

    1 回复
  • Vanessa

    呃。这样的话可能要重新写了,多选什么的也就可以了。当初看了 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 回复
  • Vanessa

    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

    好的。 🤝 🤝

请输入回帖内容 ...