likes
comments
collection
share

富文本编辑器与 Markdown 编辑器初探

作者站长头像
站长
· 阅读数 86

对于 web 端的编辑工作来讲，通常有很多种文本编辑器可供选用，它们被广泛应用于各种文档工具、博客等内容平台。

笔者近来接触到相关业务开发，才逐渐了解到这些文本编辑器大体分为：富文本编辑器和 Markdown 编辑器。

那么这二者有什么区别？其实现方式分别是什么？社区有哪些比较优秀的可供参考？

富文本编辑器与 Markdown 编辑器使用区别

它支持左右预览的 Markdown 编辑模式： 富文本编辑器与 Markdown 编辑器初探

也支持如下的富文本编辑模式(Rich text Editor)：

富文本编辑器与 Markdown 编辑器初探

从使用方式来看。富文本编辑使用起来很像简易版的 Word ，选中内容之后设置其样式，并可以插入代码块、引用等。而 Markdown 编辑器是依靠我们使用 Markdown 语法来实现相应的样式，并插入内容。

从编辑角度来看。此外，Markdown 的原内容都可以以普通文本形式存储，在需要时解析并渲染出来，编写时依靠一些 Markdown 语法，我们就可以轻松预测最终的渲染结果。对于富文本编辑器，它的原内容就只是 HTML，虽然可以用普通文本表示，但是难以预测最终的渲染结果，或者你需要一个精通 HTML 的工程师帮助，而且通常需要将 HTML 文本放在浏览器环境中，才能看到最终结果。总的来看，编辑富文本需要一个浏览器环境，而 Markdown 编辑器则只依赖一个普通的文本编辑器。

从功能角度来看。富文本编辑器的各种功能难以与 Markdown 编辑器的功能一一对应，比如富文本编辑器大都支持字体颜色设置，而 Markdown 编辑器下，由于 Markdown 语法不支持颜色设置，所以大都没有字体颜色的支持。再如，Markdown 编辑器我们可以编辑公式、UML 流程图、五线谱等等，而富文本编辑器却不支持这些。

实现方式

富文本编辑器

富文本编辑的实现，主要是基于 HTML 元素的 contenteditable 属性，当我们设置一个非表单元素的该属性为 true 时，其内容就会变为可编辑的：

富文本编辑器与 Markdown 编辑器初探

那么整个实现思路就变为：如何将富文本编辑器的菜单栏与所选文字对应结合，得到所需要的 HTML 元素及样式。

贴上国内程序员开发的一款比较好用的富文本编辑器——wangEditor 中的一段相关代码：

/**
 * 生成编辑区域节点的 vnode
 * @param elemId elemId
 * @param readOnly readOnly
 */
function genRootVnode(elemId: string, readOnly = false): VNode {
  return h(`div#${elemId}`, {
    props: {
      contentEditable: readOnly ? false : true,
    },
  })
  // 其他属性在 genRootElem 中定，这里不用重复写
}

其他更为具体的实现细节，笔者后边另起文章单独探究。

Markdown 编辑器

实现 Markdown 编辑器并不困难，因为编辑 Markdown 内容，本来只需要一个普通的文本编辑器，那么甚至都可以用一个 TextArea 就可以编写 Markdown 的内容：

富文本编辑器与 Markdown 编辑器初探

关键是如何方便我们编辑 Markdown 内容，也就是如何随时预览编辑的结果？

从开发任务角度讲就是如何实现一个 Markdown 到 HTML 的 parser，或者 Markdown 引擎：

上述库，均有将 Markdown 解析为 HTML 的功能，当我们要自己实现一个 Markdown 编辑器，便可以基于上述库来开发。

例如国产比较出名的 vditor ，它是思源笔记所开源的一款 Markdown 编辑器，Github 已有 5.3k star，是用自研的 Lute 作为 Markdown 引擎，而 Lute 也是参考markdown-js实现的。

再如一款 star 较高的 Markdown 编辑器：stakedit ，其也是基于 Markdown-It实现的。

但是大多数 Markdown 编辑器会集成一些富文本编辑的功能，如 vditor

富文本编辑器与 Markdown 编辑器初探。

至于如何实现这样的 Markdown 引擎，笔者再专门写文章介绍。

社区可供参考的

富文本编辑器

富文本编辑器在社区中还是有非常多的实现：

  1. draft.js

特点：专为 React 而生，可以无缝接入 React 应用。

此外需要注意的是，draft Readme 中已经提到 draft 已经不再接受新的 feature 开发，后续将维护用新框架开发的 lexical ，而 lexical Readme 中提到：目前还未完全开发完毕，部分 api 会随着开发而变动。

  1. wangEditor

特点：国人开发、简洁易用；使用 vue、React；开源较久，健壮性、稳定性有较好保证。

早在两年前开发实验室数据管理平台项目时，就已经接触到该款富文本编辑器，因为是由国人开发的，虽然当时功能不是特别完善，但是使用起来非常简洁，特别容易上手。更不用说 2022 年上半年，wangEditor 的作者已经发布了 v5 版本。 根据最近的使用体验来讲，笔者仅仅用了1-2 h就完成 wangEditor 的接入，中间花费较多的主要是适配图片上传、多语言的功能。

  1. CKEditor

特点：功能比较丰富，支持如下五种不同的编辑模式。

富文本编辑器与 Markdown 编辑器初探

而且还支持 PDF、word 文档的导出，参考

笔者认为，如果需求开发中，用一个比较简易的富文本就可以实现功能，那么建议用 wangEditor，如果有功能不能满足，比如导出 pdf 等，那么可以尝试 CKEditor。

Markdown 编辑器

  1. vditor

特点：国人开发，文档查阅比较方便；由于是思源产品上提取出来的富文本编辑器，稳定性会比较好；采用自己 Lute 的 Markdown 引擎。

  1. cherryMarkdown

特点：Tencent 出品，近半年来已经更新迭代了好几版，功能比较丰富，支持专业语法，使其具备其他 Markdown 编辑器都不支持的字体颜色设置，具体可以查看以下demo。

但是由于开源时间不久，稳定性还需要加强。

例如在 ts 项目中使用最近的 0.8.1 版本时，想使用以下版本中的字符串转 HTML 功能，但是发现类型定义下：

富文本编辑器与 Markdown 编辑器初探

而官网却给出了这样的案例代码：

富文本编辑器与 Markdown 编辑器初探

  1. tuiEditor

特点：也支持多种预览模式；支持插件化，可扩展性强；有配套的 react、vue 包可供使用，项目接入方便。

  1. StackEdit

特点：Stack Overflow 所使用的富文本编辑器；开源项目是一个一整套的 server ，虽然也抽离了 stackEdit.js 的项目，但是使用文档少的可怜。

笔者看来，vditor 作为国人较早开源的一款 Markdown 编辑器，其功能也比较成熟和稳定，所以在项目功能要求不太特殊情况下，可以优先选择 vditor。Cherry Markdown 作为后起之秀，相关功能和文档仍需要继续完善，在 vditor 不满足自己情况下可以尝试使用 Cherry Markdown。比如如果产品要求你在 Markdown 编辑器中可以设置字体颜色，vditor 的 issue 中已经提到，这个由于 Markdown 语法本身就不支持，所以太难开发，而 Cherry Markdown 却基于自己语法实现了这个功能。

总结

本文就笔者最近使用文本编辑器时碰到的若干问题，稍微进行了浅显的探究，并分为富文本编辑器、Markdown 编辑器两种方案，在实现方式、社区现有方案的角度进行初步介绍。

了解有限，欢迎大家批评指教，笔者再进行补充完善。

转载自:https://juejin.cn/post/7142492886259466277
评论
请登录