前言
一年前，开源编辑器 WangEditor 的作者 双越老师 在掘金发布了 开源富文本编辑器 wangEditor 暂停维护 （但仍可继续使用）
在后来的很长一段时间里引起一众前端唏嘘，纷纷对此时发表看法表示开源的不易等等。
当然，后来 cycleccc 同学接棒并开始维护了 wangEditor-next。
其实当时的我并没有太关注这些事情，但是因为那时我也在做编辑器相关的产品，所以也跟着感叹了一下开源的不易。
直到今年 10 月份才有了做一款开源编辑器的想法，至于原因呢，很复杂，一会儿再说。
反正结果就是 10 月份开始搞了一个 isle-editor 的开源编辑器项目，近两个月一直在更新。
目前的进度是还有几个核心扩展没写，然后改改 BUG 、补充补充 文档 和 演练场，预计年前就会发一个可用版本。
大家想提前体验的话可以点击下方链接到官网首页或者演练场试一试，还没搞完，觉得还可以的话可以 GitHub 点个 star，PR 或者私信我提出一些建议都可以，啊哈哈哈。
嗯，大概就是这样，跟闹着玩似的，那我总不能说是找不到工作在家没事干闲的了吧！！！
本文旨在给大家介绍下这个编辑器的来源、后续计划以及相关的一些杂事等等，嗯，提前通报一下有这么个事儿。。。
做什么
我的本意是想做一款 开箱即用 的 Web 编辑器，同时这款编辑器除了支持常见的富文本、Markdown 功能外，还应该支持更现代化的 Notion Style 编辑，也可以称为 ”块“ 编辑。
为什么要支持块编辑？大家难道没发现近几年的在线编辑器风格都在模仿 Notion 吗？像腾讯文档、飞书文档、钉钉文档、语雀等等等等还有很多，像 Wolai 这种直接照搬 Notion 的也有好几个。。。所以，这种方式更现代化，也更贴合用户习惯，当然我们并不遗漏对普通富文本编辑的功能支持。
在编辑器的交互上也要更现代化些，开箱即用又可以不那么笨重，方便可扩展。
除此之外，编辑器应该提供与 AI 模型深度且快捷集成的能力，能够让用户可以无缝把 AI 模型能力集成进来，这是我认为必须要做的点之一。
为什么做
为什么做这件事，其实原因很多啊，最核心的是我去年在做一款在线笔记产品时，类似 Notion Style 那种，想要套一下开源项目，但是由于我这边技术栈是 Vue，然后，就没有然后了，，，因为 Vue 生态找不到很合适且开箱即用又方便扩展的 Notion Style 编辑器。。。
所以后来就想着不能开箱即用，那就找找有没有可用的编辑器底层实现，无非就是复杂些，然后就找到了 ProseMirror，随后又看到了 TipTap。
最后使用了 TipTap，结合 ProseMirror 做了编辑器这块。
对比 ProseMirror ，使用 TipTap 真是大大节省了开发时间，但是，由于 TipTap 是无头的，所以需要自己写 UI，加上一些扩展是收费的以及对一些复杂扩展的支持不够好，所以还是废了很大精力在写扩展和视图交互这件事上。
最后，说起来也 TM 很无语就，这不正好赶上我创业失败找不到工作赋闲在家。。所以就封装一下搞个编辑器出来搞搞开源这样子。
这中间夹杂了很多很多事情，具体就不啰嗦了，年终总结再写吧。。。
======== 以下是一段私货吐槽 ========
忍不住一定要吐槽一下，当真是没有对比就没有伤害，React 生态中就有很多此类且开箱即用的开源编辑器作品，在生态这一块，Vue 还真的是不行啊，可能是因为大家都在用，而很少有人在 “造” ？
在框架的生态这一块，如果只是用于企业开发，不在乎交互、审美这些东西，Vue 生态还是很够用的，但是一旦涉及了很好的交互、很漂亮的界面，这些我们下文都用一个词形容那就是 “精美”，Vue 生态中这种精美的开源项目不说没有吧，严谨一些，那是极极极少的（作为一个 “老” Vue 玩家，我很期待你的反驳）。。。
明明 Vue 开发者的数量并不少，，，后来我细品了一下原因，大概有以下两点吧：
Vue的用户大多在国内，国外大部分都是React用户，同时国内大厂基本都是React，而Vue大多在中小型企业，中小型企业码农恨不得住在公司，都没有自己的生活，哪来的精力做开源，所以国内大厂程序员的开源比例更高（哪怕是 KPI 阉割版开源项目呢），虽然不是绝对，但是这种差异造成了在开源作品方面的差异。。- 国内的产品大多都不追求 “精美“，而我讲究实用，主打一个功能堆砌、能用就行。。。反观国外的产品在 ”精美“ 两字上，那真的没得说。。。映射到开源项目上也是一样的，这一点无关
React、Vue这些框架。
综上所述，就造成了目前这种，看似 Vue 生态很完善，干点啥也都够用，但是一旦想要做一些 ”精美“ 的产品，往往就会捉襟见肘，要么就自己苦哈哈从 0-1，要么就转用 React。
======== 吐槽结束，不喜轻喷 ========
要怎么做
在官网介绍中我们有说到，isle-editor 是一款开源 Web 编辑器，支持富文本、块、markdown 编辑，高效且开箱即用，基于 ProseMirror 和 TipTap。
其实目前市面上主流的开源编辑器很多，我把他们自下向上分为几类。
过于老的几款（像 Quill、TinyMCE）我们就不说了，我们只说 典型 的几款开源编辑器产品。
Draft.js
一句话概括就是 Facebook 出品的一款开源编辑器，然后 Facebook 抛弃了它去搞了 Lexical。
Lexical
没错，就是 Facebook 继 Draft.js 后维护的一款富文本编辑器，也很优秀，可以看官方介绍，说问题，Lexical 虽然不仅限于 React，但是官方团队热衷于 React 生态的构建，Vue 生态支持非常拉胯。
Slate
抛开一切不谈，Slate 是我最喜欢的编辑器开源作品，我个人非常倾向于这个。但是，同样也是不限制框架，但还是一样的问题，官方团队热衷且核心考虑的始终是 React 生态，如果 Vue 中使用，要自己做视图层，麻烦，放弃。
ProseMirror
ProseMirror 是一个强大且灵活的开源富文本编辑框架，它为构建高度可定制的富文本编辑器提供了一套核心工具和 API，与框架无关，因为它简单到可以称之为一个富文本工具库了。
想用它构建一款富文本编辑器是有复杂度的，并非开箱即用，使用者需要自定义文档模型、状态管理、写视图组件和扩展组件。
总得来说就是一个适合二次开发、强大的开源富文本工具库。
TipTap
ProseMirror 是强大的，但是它同时也是复杂的，而 TipTap 则是一个基于 ProseMirror 实现的一个开源现代化富文本编辑器框架，它为 ProseMirror 提供了更高层的封装和默认实现，使其更易用。
同样，TipTap 的核心是一款 ”无头“ 的编辑器，它为原生 JS 以及多个主流框架提供了支持。
ProseMirror 和 TipTap 都是无头的，也就是不依赖任何框架，尽管你可以使用 TipTap 极大简化开发编辑器的效率，但是它依旧是复杂的，因为 TipTap 并不提供 UI 视图，开发时你需要为编辑器做很多处理，包括各种复杂扩展的实现以及视图层的处理。
So～
基于 ProseMirror 和 TipTap，做了 isle-editor。
目标
isle-editor 的目标是为开发者提供一套完全开箱即用的富文本编辑器，无需复杂的配置，即可快速集成到现有项目中。我们复用了 TipTap 的核心实现，因为它是经过检验且相对可靠的，同时我们也提供了 UI 视图以及更多的核心扩展，可以让使用者完全基于配置达到开箱即用。
你可以在任意框架中使用 isle-editor，无需复杂的配置，即可快速集成到现有项目中。（目前优先支持 Vue 视图，当然，更多框架视图正在排期中，你也可以在 GitHub 上提交代码，帮助我们实现更多框架的视图支持)
isle-editor 的基础扩展都依赖于 TipTap 做了一些处理，我们也丰富了一些扩展，正因为基于 TipTap ，所以 isle-editor 核心扩展是可以完全集成 TipTap 的，你如果使用 TipTap 开发项目，那么你可以无缝使用我们的核心扩展。你也可以参考 isle-editor 源码，因为我们希望它是 TipTap 的最佳实践。
计划&进度
目前的进度只是实现了一些编辑器基础扩展功能，因为开源有太多的需要考虑，个人精力有限，基本每天都在赶工中，如下图
目前编辑器核心扩展功能中已经实现的有
- 加粗、斜体、下划线、删除线、行内代码、上标、下标、背景颜色、字体颜色、字体样式、字体大小、文本对齐、链接、缩进
- 标题、段落、分割线、引用、有序列表、无序列表、任务列表、代码块
计划中正在实现的核心扩展功能大致排期
- 表格、图片、视频、文件会在近期上线
- AI 扩展会在 25 年 1 月随之上线
Notion Kit中侧边悬浮菜单会在 25 年 1 月迭代一版，目前是在测试一种可能性- 代码块会在 25 年 1-2 月支持可选代码主题及语言
- 表格会在在 25 年 1-2 月迭代一版可选风格
目前编辑器视图模块已实现的有
- Vue3 视图
- 悬浮菜单
- 工具菜单
- 斜杠菜单
- 目录组件
计划中视图模块大致排期
- Vue2 视图会在 25 年 1-2 月上线
- React 视图暂无排期，预计会在年会陆续补充
多语言&主题功能也是支持的。
首发可用版本预计将会在年前（春节前）上线。
文档
文档目前只写了写首页和大致目录结构，还没来得及补充内容进去，因为还在淦核心功能，说到这个文档，整个文档基本是我在体验 MarsCode 客户端时，通过 Prompt 让 MarsCode AI 基于 VitePress 生成的。
嗯，开发这个项目的过程中，其实用到了很多 AI 编程的功能，最无情的时候，我同时使用了 3 款 AI 编辑器来做不同的处理，有时间写篇帖子分享分享。
演示
就是个 low 版演示，大致长这样，其实目前主要用于我自己开发测试。。。
Playground 演示会在春节后有一波大更新，主要是可在线配置扩展预览方面功能。
FAQ
为什么叫 isle
isle 翻译过来就是岛屿的意思，可别念成 else 了，它应该读 [aɪl]，中文读音是 “爱哦”～
至于为什么叫这个名字，留个悬念吧。
为什么没用 TS 做开发
有计划，在排期
开始没想那么多，写着玩嘛，单纯不喜欢 TS 就没用，后来想用一下发现重构需要些时日，算了，等发版之后再找时间重构下吧。
为什么没有单测
问就是没有时间，会陆续补上的
会不会受限于 TipTap
并不会，看到源码结构后你就会清楚，我将 TipTap 的核心实现全部丢在了 core package 中，目前大量的工作是视图层逻辑处理，整体的结构非常简单，大家可以查看源码，如果你前期不能够信任 isle-editor 的话，完全可以使用 TipTap 来一步步构建编辑器，因为它是经过市场验证的，在一些扩展和 UI 的交互实现上，可以参考 isle-editor 源码，说不定可以为你提供一些灵感也不错。
正如上面我们所说的，在作为一款开源编辑器的同时，我们也希望它是 TipTap的最佳实践，再次鞭尸：React 很多类似开源项目，比如 blocknote、novel，而 Vue嘛，你懂的。。。
核心实现依赖 TipTap 是因为它经过了市场验证，足够稳定可直接用于生产，方便二开，TipTap 对 ProseMirror 的二次封装思路也很好，于我而言只是针对 TipTap 的 “无头” 做了视图层处理和更多扩展的实现与集成，简单来说就是补充了开箱即用的 UI 组件，同时加了常用的一些复杂扩展，如果有一天 TipTap 的更新不再适用或出于其他方面考虑，会考虑基于 ProseMirror 重构核心模块，来适配视图层，目前考虑这些为时尚早。
能否持续迭代
仁者见仁，最起码在 2 年内应该是有足够精力去迭代的，当然前提是我不转行，一个人精力总归有限，所以也希望如果大家有闲情逸致，也可以参与进来，提个建议或者捉虫也是可以的。
目前属于前期，一切都不完善，复杂功能还没怎么集成，等发版之后看看迭代情况和社区参与情况吧。
发版之后会陆续上线基于 isle-editor 的衍生 AI 知识库产品，收益会用于岛屿编辑器的维护工作，目前对持续迭代是这样的考虑，可以小期待一下。
最后
很长时间没写文章了，后面 isle-editor 的更新以及一些 TipTap 复杂扩展实践可能会更一下文章。
有时间可以一起耍啊，最后还是希望大家点一点 star！！！此乃精神食粮。
私信可交流 isle-editor 的一些进展情况，当然如果你想咨询 ProseMirror、TipTap 的一些使用也自无不可。
另，最近一年多都在创业，目前的话在找工作，毫无疑问，创业失败了，怎一个惨字了得，想想我当初还是自离的，淦，有 HC 的话可以联系我，感谢！
觉得不错，点个赞哦，也可以打个榜，虽然今年没怎么写文章。。。
over~
