事实证明我也需要开发 KuroEditor（哭）第1卷
product Technology OSS

事实证明我也需要开发 KuroEditor（哭）第1卷

在开发一款可以让用户无需电脑即可轻松设计的无头 CMS 时，我意识到了一件事：市面上没有适合 KuroCMS 的编辑器，哈哈。

等等，居然没有编辑器？！

在 KuroCMS 开发到一半左右时，Kuroto 突然想起了在 Strapi 中配置一个像样的编辑器所付出的巨大精力和时间，瞬间冻结了。如果我的头发变白了，我可能会变成一只熊猫兔。

虽然那些编辑器不适用于 Strapi，但我开始进行研究，希望能找到一个在其他地方满足我要求的编辑器……但我找不到。没门，请告诉我这不是真的，Chappy！（ChatGPT）


仅在 MIT 许可下进行搜索

由于我计划将其与 KuroCMS 一起打包和分发，拥有一个获得 MIT 许可的编辑器显然是最方便的选择。

经过研究，目前 Web 编辑器的趋势似乎完全由无头（headless）方案所主导——即您只借用逻辑，并自己构建 UI。就像无头 CMS 一样。


全球评分最高的 5 大编辑器


【TipTap】

  1. 据报道是无可争议的第一名。极其灵活，支持 React/Vue，并输出 HTML / JSON。
  2. 一个无头编辑器。您可以完全将按钮设计和工具栏布局与应用的 UI 进行匹配。它构建在强大的 ProseMirror 引擎之上。
  3. 用户群：超过 3.7 万个 GitHub Star，每周下载量超过 800 万次。几乎是全球标准。
  4. 如何集成：通过 `npm install @tiptap/react` 安装，并使用 `useEditor` hook 进行控制。


【Editor.js】

  1. 拥有热情的粉丝群，据报道具有类似 Notion 的直观体验，基于插件，输出 JSON（结构化数据）。
  2. 特点：将所有内容视为块（段落、图像、标题）。操作感觉类似于 Notion。
  3. 输出干净的 JSON 而不是 HTML，这使其非常适合在网页、移动应用、智能手表等设备上显示相同的数据。
  4. 如何集成：分别加载核心包和各个工具（Image、Header 等），然后使用 `new EditorJS()` 进行初始化。


【Lexical】

  1. 快速增长、快速、轻量、强大，由 Meta 制造，专注于设计，输出 HTML / JSON。
  2. 专注于性能和可访问性。极其轻量，即使在大型应用中也能保持高速运行。
  3. 用户群：迅速增加。与 AI 生成的内容配合良好，经常被 AI 编辑器所采用。
  4. 特点：提供先进的状态管理和基于树的数据模型。完全符合 WCAG（可访问性标准）。
  5. 如何集成：作为 React 插件进行集成。定义命名的“节点（nodes）”来构建编辑器。


【Slate】（仅限 React 的最强大的框架）

  1. 专为开发人员设计，终极自定义，仅限 React，输出 JSON（任意格式）。
  2. 特点：与其说是一个编辑器，不如说是一个用于构建编辑器的库。您可以完全定义自己的文档模型。
  3. 用户群：在 React 社区中获得强力支持（超过 3.1 万个 GitHub Star）。
  4. 特点：擅长处理具有复杂嵌套结构的项目（例如表格中的列表，列表中的图像）。
  5. 如何集成：使用组件导向的方法进行构建。编写自定义函数如 `renderElement` 来控制渲染。


【Milkdown】（专注于 Markdown 的所见即所得）

  1. 在特定使用场景中表现强劲 | 将 Markdown 与可视化操作相结合 | 难度低到中等 | 输出 Markdown / HTML
  2. 特点：提供类似 Typora 的体验，在您写作时实时格式化 Markdown。
  3. 用户群：专为开发人员和技术文档设计。
  4. 特点：通过插件提供强大的 Markdown 扩展。支持数学符号（LaTeX）和图表（Mermaid）。
  5. 如何集成：使用 TypeScript 构建；通过在数组中传递所需的插件来进行初始化。


那么，这五个编辑器怎么样呢？

我曾尝试将 TipTap 和 Lexical 作为 Strapi 的编辑器，但它们根本没用……Lexical 无法正确处理图像，TipTap 也有问题。它们都无法接近 Kuroto 想要的“所见即所得”（指在编辑器中进行的编辑效果与最终输出完全一致）。Editor.js 基本上也是一样；纯 JSON 编辑器无法提供真正的“所见即所得”。如果您只是连续输入文本和代码，它们可能还行。至于 Milkdown，它甚至没有提到图像——您还不如直接用 LaTeX。说实话，Kuroto 真的很讨厌 React。向 Meta 致歉（擦汗）。如果必须要框架，我最多使用 Vue，但我完全是 Astro 的粉丝！说起来，以前有一部叫《阿斯特罗球团》的漫画。

最终，我想起在 Strapi 中使用过的 Quill + better-table 是最好的选择。然而，我就是无法接受它的表格实现，哈哈。就在那时，我脑海中的小恶魔说：“如果你要抱怨那么多，就自己做一个吧！”确实，你说得对。我表示歉意。


于是，KuroEditor 的开发开始了

我不需要一个高性能的编辑器。我只想要“所见即所得”和一个可以毫无压力使用的表格工具，类似于 Dropbox Paper！在内心呐喊的驱使下，我决定自己动手开发。我将在下一篇文章中分享 Kuroto 开发的编辑器的细节。它已经基本完成，一旦我在撰写这些文章的过程中完成测试并整理好 GitHub 仓库，我就会发布它。