大家好，我是小斑，于 2020-8-1 诞生，一个起于 Markdown 却不止于 Markdown 的富文本编辑器。

又一个编辑器？

编辑器的世界里，前辈众多，知名编辑器比比皆是 Word、Page、 Idea、Vscode 等等，但大阵营可以分为两个：

• 纯文本编辑器 - 只能输入字符的编辑器，程序员电脑里的 IDE ，大多属于这一类；
• 富文本编辑器 - 可以进行图文的混排，功能丰富，文字有单独样式、格式的编辑器，主要活跃与 Web 端；

纯文本编辑常被用来写程序，但其中却有个身在曹营心在汉的异类：Markdown 编辑器，这类编辑器虽说只能输入文字，样式也单一，但生成的内容却可以和富文本编辑器媲美。

另一类，便是富文本编辑器了，顺便提一下，小斑我也是富文本编辑器，流行于 Web 端的富文本编辑器有很多，但我的主人为什么还要费劲心思造小斑呢？这就得请我的主人来说道说道了，下面有请阿飞先生来讲述讲述。

“咳咳！不是说自我介绍的任务交给你了嘛~ 我已经和你说过啦，你自己来吧！”

“老大，你怎么还害羞上了。。。那行，我自己来！”

“故事发生在一个月黑风高的夜晚，只有主人面前的电脑亮着，电脑屏幕里不知放着什么，阴暗的屏幕上有一口很深的井，突然···”

“小斑！”

“好好好！那我正式开始了！”

不得已的妥协

其实吧，最早的时候，大概 3 年前，我还不存在，老大想找个称手的富文本编辑器来搭自己的博客，谁让老大是个程序员，最大的特点就是喜欢折腾，奈何 3 年前的老大还是只小菜鸡，没有能力自己弄一个博客系统，看了一遍市场上成熟的博客框架后，选了 Ghost 这个简约的博客系统，也结识上了 Markdown 这门干练的语言。

但没过多久，老大他就开始哔哔了：“作为一个前端，连个图文混排的博客都没有，太 Low 了！”

接着就开始折腾，刚开始，他只是想简单的增强 Markdown 以达到自己想要的效果，一顿写 Markdown-It 的插件，但是增强来增强去，还是不爽，毕竟编辑 Markdown 时是没有效果的（当然，双屏 + 同步滚动是个不错的解决方案），牢骚话也变成了：“我都在公司面对了一天的纯文本编辑器，回来写博客还得面对纯文本，写点东西可太不容易了。”

哎！没得办法，富文本编辑器必须得搞起来，老大也不想再造轮子，综合考虑试用下来，最终还是做出了决定：那就是造一个！！但话得说说清楚：别的编辑器也很不错，但却并没有满足老大的需求，就比如老大在折腾期间选中的一款富文本： DraftJs。

DraftJs

DraftJs 如它的名字一样：草稿，在记事方面，绝对的够用，但对于生成网页来说，却有几个痛点：

• 图片不能连着放，中间的空行删除不了；
• 图片不能塞到文字中，老大那一大箱的表情包可都用不了了，虽说老大还是通过曲线救国的方式给添加上了；
• 不能生成 Markdown ，虽说能生成 Html ，但是 Html 结构复杂，语法不如 Markdown 来的简洁干练；
• Table 表格，不支持；
• 文字的样式输入截断不了，比如光标输入前的字符是加粗的那么之后的文字永远都是加粗的状态，不能截断样式，有点难受；
• ···

相信这些，知乎的前端大佬们应该很懂，老大看了他们的编辑器，用的就是 DraftJs ，想必塞由公式生成图片费了不少劲吧~

其实老大那时也还没开始重复造个轮子（没准是实力不够呢！😜），深入看了 DraftJs 源码，并翻译了整个 DrafrJs 文档后，写了个 Draft-X 用于增强 DraftJs。

但是没过多久，还是不爽！（可真是难伺候~ 😅）

思前想后，老大决定放弃 DraftJs 在看看别的富文本编辑器，或自己从头写一个。

决定

在重新找一个编辑器之前，老大列了下自己的需求：

• 样式能够完全的自定义（至少对于编辑器开发者而言）；
• 直接添加样式还不够，还要加起来方便，比如宽度的修改直接拖动角标等；
• 文字和图片能连续排放，表情包必须安排上；
• 文字样式能截断，输入空格后，文字还原为默认样式；
• 必须支持 Table；
• 最好还能直接像 Highlight 那样，通过修改 Css ，直接定制文章的整体样式；
• 既然提到了 Highlight 那代码块要支持高亮；
• 当然，其他的一切都要向别的编辑器靠齐；

• 最后，也是很重要的一点：与 Markdown 要有互动：

  1. 直接导入 Markdown 文件；
  2. 支持导出 Markdown 文件；
  3. 支持直接复制 Markdown 文本；
  4. Markdown 支持的内容，编辑器必须要支持，编辑器的功能应该是大于等于 Markdown 的；

大概也就这么多吧~

“多吗？？？不多吧！！！”

“不多不多😂 😂~ 老大你怎么来了！” 高要求才能有小斑我呀！

带着这些要求，老大看遍了目前能搜到的富文本编辑器，与预期的功能相比，都差了一两点。

• TinyMCE、CKEditor、UEditor、wangEditor 之类的富文本编辑器为纯 Html 编辑器，是对 contenteditable 容器的增强，它们很优秀，但却不符合老大的要求，老大理想中的富文本编辑器是能生成别的内容，不只是 Html，比如 Markdown ，因此内容必须是由 JavaScript 来控制。这点还真不是老大挑，试想一下，如果你写错了一个字，是在 Html 里找容易呢，还是在 Markdown 里容易，而且如果内容由 JavaScript 控制，没准，还能生成别的东西！比如说小程序的页面？不过这都是后话了，但这一切实现的基础就是内容在自己的掌控范围内！因此，这点其实还挺重要的！
• Quill、DraftJs 内容由 JavaScript 控制，但是功能有点不够用，最重要的原因是不支持 Table；

当然，以上两类都可以通过一些曲线救国的方法来支持老大的想法，比如在 TinyMCE 上加一个 Html 解析器，生成抽象语法树后，在生成别的内容，或是继续增强 DraftJs 。思来想去，3 个月前，老大决定：要做就做最正确的事，做一个连一个字符都在自己掌控中的编辑器，这样无论自己想干什么，都能实现。于是，3 个月后，小斑正式诞生！👏

能干嘛？

我是小斑，一个功能完整且丰富的富文本编辑器，相关的说明文档就在我的编辑器里，打开就能见到，说明书即是了解小斑的途径，也是能够编辑的哦，放心大胆的去改吧，说明书随便改，小斑并不会保存。想恢复？刷新一下就好啦！也希望大家好好阅读后再开始探索哦~ 在这简单的谈谈我的特点和强大的功能吧：

1. 使用但不依赖于 contenteditable 容器，简单来说，老大只用了该容器的光标用于定位输入或是操作的位置，其他的内容一概不用（包括文章历史栈的管理），也就是说：如果哪天老大想把光标也折腾折腾，那么 contenteditable 容器大概会被老大抛弃吧；
2. 内容完全由 JavaScript 所控制，小到一个字符，只要配合适当的生成器，就能生成所需要的内容（目前能生成 Html 和 Markdown）；
3. 样式随意添加，小斑的核心完全支持，但对于一个面向用户的小斑而言，老大考虑后，提供操作，但未开放；
4. 与 Markdown 有着良好的互动，包括直接打开，导入导出，直接复制 Markdown 内容；
5. 快捷生成，小斑有一套完整的快速生成指令，在空行内直接输入指令，按下 Tab 键即可快速生成段落类型，并且这些指令与 Markdown 的标记完全一致，比如在空行输入 # 键，在按下 Tab 键，就能直接生成一级标题，当然详细内容请参考说明书；
6. 代码由 Highlight 进行高亮，编辑与高亮同步进行；
7. 文章可设置主题，一键修改文章的整体呈现；
8. 支持 PWA，使用 Chrome 打开，地址栏右侧会有 + 号哦，点击一下就会生成本地应用，只要不切换代码和文章主题，没网也能用！

接下来

接下来，老大想把小斑诞生过程中遇到的一些问题，以及整体的架构给好好梳理一下，并记录下来。

这部分老大已经全权交给我整理了！那我就不客气了，偷偷告诉大家，我的内部是一个井然有序的世界，各个部门担任着各自的职责，忙碌而有序。

好啦！今天嘚吧嘚的说了这么久，也是希望大家能多多使用我，爱你们哟~

哦！对了，为了避免使用低版本的浏览器时，造成问题，小斑主动做了浏览器版本校验，请把浏览器升级到最高版本哦~ ps: 生成的文章不受浏览器版本影响。~~~~

本文由 ZebraEditor 编辑并生成，我是小斑，我为自己带盐。