关于前端:你好-我是小斑

大家好，我是小斑，于 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 编辑并生成，我是小斑，我为本人带盐。