【前端编辑器分析（markdown,富文本）】

随着近几年markdown编辑器的流行，富文本编辑器不再是唯一选择，但是主体都是工具栏加编辑区的模式。
1、markdown
markdown使用格式标记语言编排内容，当你要修改文章某个地方的格式时，在该位置加入对应的格式符号即可，markdown小众，但流行于技术人员之间，在CSDN、博客园、typoratypora软件中编写的文件内容可以直接复制粘贴，每个使用的群体可能会对markdown的功能进行扩充，但是基本的10种左右的操作相同，语法通用，移植性好，不会在跨平台的时候出现内容样式错乱的情况，但是对于编辑小白来说不是很友好，需要熟悉markdown的语法，于是markdown衍生出三种预览模式：

• 所见即所得，使用markdown语法，得到的内容就是和最后生成的页面内容一样，没有语法的痕迹， 相当于在工具栏操作了某种样式
  

• 即时渲染，在输入markdown语法后，会展示相对应的样式效果，但是会保留语法的痕迹
  

• 分屏预览，即分为两块显示区，一边进行编辑，另一边显示生成的效果

通过对以上三种模式的分析，第一种不展示语法，直接生成效果，相对比较友好；第二种相对于小白来说看起来有点莫名其妙；第三种分屏预览占的空间比较大，适合单独做一个页面，不适合内嵌在某个地方。如果选择markdown编辑器的话，可以在第一种的基础上进行更改，将一些常见的功能放到工具栏，同时支持markdown语法的识别，例如语雀的编辑器，这样可以保证不会语法的人也能使用，同时识别markdown语法，让从其他编辑器复制过来的内容也能正常展示。

我对两款支持所见即所得的markdown开源编辑器进行了调研，分别是Vditor和milkdown：

1. milkdown提供一个基础框架，其他功能都需要通过引入插件实现，自由度比较高，但是需要较长时间的熟悉；

2. vditor更成熟一点，踩坑的人也不少，但是要对其进行二次封装还需要评估工时与难度。

2、富文本编辑器
富文本编辑器最大的特点就是所见即所得，对于任何人来说都容易上手，没有什么特殊的语法；富文本编辑器总的来说有以下几种实现方法：

难度排名：contenteditable + document.execCommand() < contenteditable + Selection + Range < DOM 完全自己写 < Canvas
Canvas开发难度很大，同时自由度也很大，比如腾讯文档；
阿里的语雀则用的是第三种，对浏览器的原生事件的依赖比较小；
ueditor编辑器是由前两种方式结合起来开发的，开发年限比较久，但是用起来也是符合现在的规范；