你好~ 我是小斑

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