首度公开！KuroEditor 的开发初衷、功能与内部机制 vol.2

开发策略

既然这是为 KuroCMS 量身定制的,我的目标是在保留核心本质的同时,提供尽可能多的通用性。一个富文本编辑器（WYSIWYG）是必不可少的,并且它必须采用纯原生 JS（Vanilla JS）构建。它的运行速度必须极快,不依赖任何框架。我避免将其做成严格的无头编辑器（headless）,以保持松散耦合。只要调用方没有指定 @layer,它就可以通过匹配调用方的按钮布局来保持视觉统一——虽然我在 KuroCMS 中并不会用到这个特性！哈哈。

样式方面,CSS 仅使用 Tailwind 加上 KuroEditor 的内部样式。表格的行为与 Dropbox Paper 类似。目前来说,即使有些地方还不完美,但只要可用性没有受到严重影响,我就会将“完成”置于“微调”之上。毕竟,只有发布了才算真正开始。只要达到基本可用的程度,我就会将其发布。

技术规范详解

在博客中用文字解释详细的技术规范可能会很枯燥,所以我用图片来向大家展示。

如图所示,KuroEditor 在顶部菜单中提供了两种视图：预览 and HTML。然而,我预计大多数人不会使用 HTML 视图。它是为那些希望通过 HTML 编写 KuroEditor 尚未支持的自定义功能,或者想检查内部 HTML 行为的人准备的。

接下来的图标依次为：表情符号、创建表格、媒体、代码、水平线、自动保存、保存以及目录。基础媒体文件可以通过拖拽直接粘贴到光标位置,因此媒体按钮本身很少被用到。

基础文本装饰

只要选中哪怕一个字符,用于文本和光标行装饰的菜单就会弹出来。这符合我们不希望菜单一直显示的原则,同时也有助于缩短鼠标移动的距离。

从左至右依次为：加粗、斜体、下划线、删除线。接下来是用于标题设置的 h1、h2 等。然后是引用条和提示块。紧随其后的是文本颜色、字体大小、行高、对齐方式（左对齐、居中、右对齐、两端对齐）、项目符号列表和编号列表。（顺便提一下,按下 Tab 键会自动创建一个段落。）*在较新版本中还可以选择字体类型。

表格功能是重中之重

表格功能是 KuroEditor 的一大看点。插入行或列的操作类似于 Dropbox Paper：当鼠标光标靠近边框时,边框旁会出现一个“+”按钮。点击它即可插入行或列。删除操作则是通过行右侧或列下方的红色“-”按钮完成。操作表格变得无比简单。合并和拆分单元格也只需点击一个按钮。你甚至可以通过鼠标移到边框附近弹出的右键菜单来微调边框的粗细和颜色。

灵活的媒体放置

媒体的粘贴非常灵活。不仅支持调用方存储的本地图片,您还可以通过 YouTube 链接轻松插入音乐排行或视频列表。如果您想通过键盘输入网址,输入 [[ url ]] 将立即触发自动展开。

利用目录功能

对于小说或合同等长文档,使用 h1、h2 等进行段落管理会非常方便。通过顶部菜单中的目录功能,即使在很长的文档中,您也可以一目了然地看到自己已经写到了哪里。

接入方案概览

最后,接入非常简单。只需在您想要放置编辑器的位置插入一行代码,并为保存等操作准备好回调函数即可。数据以 HTML 格式进行传递。在 KuroCMS 中,这个接收到的 HTML 会作为文章数据进行存储和管理。更多详情请参考下方链接。由于耦合点极少,它可以轻松集成到 any 工具中。

结语

日本人真的很喜欢表格展现形式（就像日本的住宅非常喜欢隔断一样！哈哈）。不过,很少有国外的编辑器能提供好用的表格实现,通常也缺乏视觉上的自定义。我特别纳闷为什么合并单元格的功能会如此罕见。无论如何,我希望 KuroEditor 能对一些人有所帮助。

1. GitHub 代码仓库： https://github.com/Kuro-Boo/KuroEditor
2. KuroEditor 介绍页面： https://kuro.boo/kuroeditor/
3. KuroEditor 测试页面： https://kuro.boo/kuroeditor/sample/