「区块编辑器」(Block-styled Editor) 是最近我刚接触到的一种线上编辑工具。使用这种编辑器让我感受到了不同于以往的线上编辑体验。而这些体验也让我迫不及待的想要分享一下尝试的过程和想法。
Word-styled vs Block-styled
在说「区块编辑器」之前，不得不提一下「以前的」线上编辑器。大约类似于 CKEditor 之类的。（当然，目前这类编辑器依然还是主流）
如上图所见，这类编辑器给我的感觉如同是在用 Office Word，单调又无趣，繁琐且臃肿。
有鉴于此，我的各种项目中很少引入 HTML 编辑器。基本都是提供一个简单的 textarea 框。发布文章的时候就把 Markdown 编辑器中写好的内容复制到这个 Textarea 文本框，然后保存提交。
过程虽然繁琐了点，但比起糟糕的线上编辑器体验，我觉得也还能接受。直到前段时间因为一个小项目体验了一下 Wordpress 的后台编辑器，我被深深的吸引了。
上图是我在 Wordpress 区块编辑器中的小尝试。不同于以往脑海中的任何编辑形式，内容显得更加的「原子化」。丰富的区块类型也让一篇文章的展示性有了更多可能。这种编辑方式让我感受到了前所未有的新鲜感。
喜爱之余，我也了解了一下其他人对于这款编辑器的看法。褒贬不一。所以意味着 Block-styled 区块编辑器不是一个普适于所有人的选择。不过对我来说，它却是如此完美。以至于恨不得立马在所有项目中都用上。
Editor.js
Wordpress 的区块编辑器很优秀，但问题是不能脱离 Wordpress 使用。抛开这个编辑器，Wordpress 对我来说没有任何吸引力。所以我开始寻找有没有其他可以在任意项目中独立使用的区块编辑器。目前我找到的就是这款：Editor.js。
Editor.js 从使用的完整度来看，还远远比不上 Wordpress 的古腾堡编辑器。不过胜在能用。而且插件系统看起来有无限扩展的可能性。如果在自己的项目中使用，也没有太大问题。
在自己项目中引入这个区块编辑器也很简单，使用 npm 安装：
npm i @editorjs/editorjs -D或者下载打包好的源码。然后通过 script 标签来引入。然后在页面提供一个 id 标签的元素。例如：
<div id="editor"></div>最后通过 Javascript 代码初始化编辑器就可以了：
import EditorJS from '@editorjs/editorjs';
const editor = new EditorJS({
holder: 'editorjs'
});默认安装好的 Editor.js 只提供了一个段落区块，也就是说只能输入段落文字。要获得稍微完整的体验，还需要安装以下这些区块插件：
-
标题：
npm i -D @editorjs/header -
链接：
npm i -D @editorjs/link -
HTML 源码：
npm i -D @editorjs/raw -
图片：
npm i -D @editorjs/image -
列表：
npm i -D @editorjs/list -
引用：
npm i -D @editorjs/quote
更多可用的插件可以看看官方帐号的 Github 仓库：https://github.com/editor-js。
安装好插件后，需要在初始化编辑器的代码中添加相关配置。比如引入标题和列表插件：
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
const editor = new EditorJS({
holder: 'editor',
tools: {
header: Header,
list: List
},
})另外不同于常用的编辑器，Editor.js 返回的数据不是原始的 HTML 代码，而是一个 JSON 对象。
比如用 Editor.js 编辑了这样一段文字：
获取到的返回数据如下：
{
"time" : 1645876450627,
"blocks" : [
{
"id" : "jwUzzIMzIZ",
"type" : "header",
"data" : {
"text" : "zzxworld",
"level" : 1
}
},
{
"id" : "ZgfPGgmPY7",
"type" : "paragraph",
"data" : {
"text" : "来自区块编辑器的体验。"
}
},
{
"id" : "5ccy6nSLZP",
"type" : "header",
"data" : {
"text" : "特性",
"level" : 2
}
},
{
"id" : "_J2GMTXbMo",
"type" : "list",
"data" : {
"style" : "ordered",
"items" : [
"灵活。",
"便于扩展。",
"定制性强。"
]
}
}
],
"version" : "2.23.1"
}这个 JSON 对象保留着所有区块内容的原始信息。这种结构化的数据不同于传统的 HTML 编辑器，让数据的转换和渲染有了更大的可能性，以及灵活性。
一些应用场景
我目前正在往自己的项目中引入 Editor.js 区块编辑器。这是目前实现的一个「沉浸式」写作界面：
稍微体验了下，感觉良好。等功能上线后，我会开始尝试脱离现在的 Markdown 写作流程，使用这个线上界面来写文章。然后根据自己的实际使用感受再进行细节功能的优化。比如之前复制 Markdown 内容到线上后要一张张重新定位位置并上传图片的环节就不需要了，这让我有信心能获得比之前流程更加便利的写作体验。
另外 Editor.js 的魅力对我来说还不止于此。利用它的「区块」特性，针对一些专用场景，还能定制出一些完全看不出编辑器特征的功能。关于这一点，在 Github 上有个 awesome-editorjs 库。里面不仅有各种可用的相关插件，还收录了几个基于 Editor.js 的商业项目。如果有空去看看，一定会惊讶于区块编辑器的定制性和表现力。