背景

传统的 web 富文本编辑器都是下图这样子的。这个设计，从 MS Office 推出普及，到现在都几十年了，大家也早就习惯。

前段时间，经 wangEditor 团队的一位新成员介绍，我认识到了一种新的编辑器 —— 块编辑器。说来惭愧，块编辑器投入线上使用也有 2 年时间了，我之前都不知道，孤陋寡闻了。

经过几分钟的体验，我就熟悉了它的操作流程。又经过几天的思考，我感觉它将会是知识库平台编辑器的未来。我估计，不出几年，全世界的知识库平台，都会切换到块编辑器。

如果想体验块编辑器，可以：

thoughts.teambition.com/ 注册使用即可，国内的，访问速度快
开源编辑器 editorjs.io/ ，访问速度慢一点
国外经典案例，知识库平台 www.notion.so/ ，已拿到大笔投资（网站打不开就算了，反正就是打不开～）

体验功能

和传统编辑器的操作体验不同，所以可能遇到一些困惑 —— 不过经我体验，只遇到了一个困惑点 ，所以无大碍。

插入元素，没问题，完全傻瓜式
对已插入的元素，修改属性，也没问题，完全傻瓜式
唯一遇到的问题：切换元素形式：从文本切换到列表
- 传统操作：输入多行文本，选中多行，点击“list”菜单
- 块编辑器：直接插入一个 list ，然后编辑
- 但，从长远发展和扩展性来说，还是后者更好。list 有其独特的结构（特别是多级列表），和文本不同。

为何块编辑器是未来

PS：这里还是要明确一下，加一个限定：是知识库平台的，并适用于所有场景。

块编辑器的核心竞争力，或者和传统编辑器的区别是 —— 它极强的扩展能力，可以容纳万物。它天生就是为了扩展而生的，天生就是为了支持不同形式的内容。

之前我们用 office 软件，word excel ppt visio 都是严格区分的，而在块编辑器中，他们可以完全融合在一起。而且还可以继续扩展其他内容：代码块，视频，附件，表单，等任何常见的内容元素。即，它可以作出任何你能想到的内容。

有人可能会反驳：传统编辑器也可以实现这些呀？ —— 对，但是实现难度和复杂度，两者不是一个量级的，下文会有解释。

我们也都知道，现代的知识库，内容越来越丰富，越来越混杂。越是这样，我们越一个集成度高的单一产品，而不是多个产品让我们自己去选择。这就像，我就需要一台 iphone ，而不是一个手机、和一个相机、和一个 pm3、和一个录音笔、和一个游戏机……

这就是块编辑器的价值。

如何实现的

块编辑器极强的扩展性，就源于它的结构设计，如上图。

传统编辑器所有内容都混杂到一起，牵一发动全身。它本身就是一段 html。

块编辑器设计本身就是基于一个一个的“块”，一段文字，一个图片，一个表格，都是一个块。天生就是结构化的。基于块，可以派生出各种各样的类型。

如果要进行多人协同编辑，就要对内容进行 diff 和 patch 。传统编辑器要把 html 处理为 json，这期间可能会遇到很多问题，而块编辑器本身就是结构化的。

而且，它将传统编辑器的菜单栏拆分开，解决菜单栏混乱的问题。而且，还把菜单中的“插入元素”和“修改属性”两部分，彻底拆分开。这样在扩展多种内容类型（如视频、表格、思维导图、代码块）时，菜单就不会混杂在一起，而是各自拆分开，操作就更简单了。

结合代码来看，可能更加清晰。editorjs.io 官网介绍的数据结构

{
    "time" : 1603417807959,
    "blocks" : [
        {
            "type" : "header",
            "data" : {
                "text" : "Editor.js",
                "level" : 2
            }
        },
        {
            "type" : "paragraph",
            "data" : {
                "text" : "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text."
            }
        },
        {
            "type" : "list",
            "data" : {
                "style" : "unordered",
                "items" : [
                    "It is a block-styled editor",
                    "It returns clean data output in JSON",
                    "Designed to be extendable and pluggable with a simple API"
                ]
            }
        },
        {
            "type" : "image",
            "data" : {
                "file" : {
                    "url" : "https://codex.so/public/app/img/external/codex2x.png"
                },
                "caption" : "",
                "withBorder" : false,
                "stretched" : false,
                "withBackground" : false
            }
        }
    ],
    "version" : "2.18.0"
}

使用场景

上文提到，并不是所有的场景都适合使用块编辑器。

例如 OA CMS 的 form 表单，博客的评论框等，这些功能，还是需要传统编辑器的。

块编辑器 block-styled editor - 知识库内容编辑的未来

背景

体验功能

为何块编辑器是未来

如何实现的

使用场景