天哪，为什么我们又要聊编辑器？Vue 和 Editor.js 的爱恨情仇

说实话， 做前端开发的，谁没被富文本编辑器折磨过？真的，每次接到需求说要做一个“像 Word 一样”的编辑器，我的内心都是崩溃的。你知道那种感觉吗？就像是你只想吃个简单的煎蛋，后来啊非让你做满汉全席。以前我们用那些老古董， 与君共勉。 TinyMCE 啦，CKEditor 啦，它们确实强大，但是重啊，重得像头大象。而且它们生成的 HTML 代码， 乱得就像我那从来没整理过的房间，全是 div 套 div，样式冲突起来简直要命。

最终的最终。 但是时代变了朋友们。现在流行什么？流行块级编辑器。这玩意儿就像是乐高积木，你写一段话，是一个块；你插个图片，又是一个块。这种结构化的数据，存到数据库里简直不要太爽。这就是为什么我今天要死磕 Editor.js。虽然它的文档有时候让人想砸电脑，但一旦你搞懂了你会发现它真香。特别是在 Vue 里用，虽然有点折腾，但为了那个清爽的界面值了。

到底什么是 Editor.js？别跟我扯概念

别去翻那些官方定义了看了头晕。简单Editor.js 就是一个让你写东西不再乱七八糟的工具。它不直接给你生成 HTML 标签，而是给你一坨 JSON 数据。对，就是 JSON。 开倒车。 你想怎么渲染就怎么渲染，完全由你说了算。这对于我们这种有强迫症的开发者简直是福音。你可以把它想象成一个只会输出原材料的高级厨师，至于怎么炒菜，那是你后端或者前端渲染层的事。

而且，它那个插件系统，怎么说呢，挺有意思的。你需要什么功能就装什么插件，不像以前那些编辑器，一股脑全给你塞进来不管你用不用得上。这种按需加载的感觉，就像是你去超市买东西，只买自己想吃的，不会被人塞一堆不需要的促销品，说句可能得罪人的话...。

在 Vue 里搞起它， 第一步总是最烦人的

好了废话不多说我们直接进入正题。怎么在 Vue 里把这玩意儿装进去？先说说你得有个 Vue 项目吧？如果没有，赶紧 `npm create vue@latest` 一个去。别问我为什么不用 Vite，虽然 Vite 很快，但我就是习惯用脚手架，别杠，杠就是你对，卷不动了。。

然后就是安装包。这一步最简单，但也最容易出错。为什么？主要原因是网络啊，主要原因是版本啊！有时候 npm 慢得像蜗牛，这时候我就想骂人。不过我们假设你的网络很顺畅，没有那些乱七八糟的代理问题。你需要安装核心包，还有几个基础的工具包，不然你连个标题都写不了，我跪了。。

npm install @editorjs/editorjs @editorjs/header @editorjs/list @editorjs/paragraph

看到这行命令了吗？复制粘贴，回车。然后你就等着吧。要是报错了别来找我，大概率是你 node 版本不对，或者是你运气不好。开个玩笑，其实大部分时候都是主要原因是依赖冲突。这时候你就得删掉 `node_modules` 重新装，这是前端开发的保留节目，懂的都懂，我可是吃过亏的。。

代码来了别眨眼，虽然它很简单

装好之后我们就要开始写代码了。这里我用的是 Vue 3 的 Composition API，也就是那个 ` 看明白了吗？这段代码其实就干了几件事：引入包、初始化编辑器、配置工具、销毁编辑器、保存数据。 客观地说... 逻辑很清晰，对吧？但是千万别小看这几行代码，每一个坑我都踩过。比如那个 `holder` 属性， 我之前写错了一个字母，找了半天 bug，再说说发现是拼写错误，那种想抽死自己的心情，你们能体会吗？

要是没帮到，那就算了反正我也没收费，对吧？大家加油，把编辑器集成好，早点下班，CPU你。！

哪怕过程痛苦一点，哪怕被坑几次再说说做出来的效果，绝对能让你在产品经理面前装个大的。 好了不说了我得去改 bug 了。刚才写的代码好像又报错了说是 `editor.save` 不是一个函数。 有啥用呢？ 天哪，我是不是又把 `editor` 变量搞丢了？这就是程序员的命啊，永远在修 bug 的路上。希望这篇乱七八糟的文章能帮到你，哪怕是一点点。

哈基米！ 虽然它配置起来有点繁琐， 文档有时候也不太友好，但是它带来的那种结构化的数据体验，是传统编辑器给不了的。 如果你的项目只是个简单的留言板，那用个 textarea 就行了别折腾这个。但如果你是在做一个 CMS， 或者一个知识库，或者一个需要复杂排版的内容平台，那 Editor.js 绝对值得你花时间去研究。

大体上你能想到的都有了。但是别高兴得太早。装得越多，你的编辑器初始化就越慢。而且插件之间有时候还会打架，比如样式冲突了或者快捷键冲突了。这时候你就得一个个去排查，那酸爽，谁用谁知道。 再说说的一点废话和 说了这么多， 其实就想表达一个意思：Editor.js 是个好东西，特别是在 Vue 这种现代框架里用，感觉特别对味。

插件大乱炖， 看看都有啥好东西 为了让你更直观地了解 Editor.js 的插件生态，我随便找几个常用的列个表。虽然不一定全，但应付一般的需求是够了。要是这些还不够，那你就去 GitHub 上搜吧，那里是宝藏，也是坟墓。 插件名称 功能描述 是否免费 推荐指数 @editorjs/header 标题插件， 支持 H1-H6 是 5/5 @editorjs/list 列表插件，有序无序 是 5/5 @editorjs/simple-image 简 盘它... 单图片插入 是 4/5 @editorjs/image 高级图片上传 是 3/5 @editorjs/code 代码块 是 4/5 @editorjs/quote 引用块 是 3/5 @editorjs/delimiter 分割线 是 2/5 @editorjs/table 表格 是 4/5 @editorjs/link 链接工具 是 3/5 @editorjs/attaches 文件附件 是 3/5 你看，这插件多不多？

" } } ] } }); 看到那个 `data` 字段了吗？就是这玩意儿。你得保证它的结构和编辑器保存出来的一模一样。 我满足了。 有时候后端存数据库的时候， 可能会把 JSON 转成字符串，取出来的时候记得 `JSON.parse` 一下。这种低级错误，我都懒得说了大家肯定都犯过。

毕竟它要一个块一个块地去生成 DOM 节点。这时候你就得考虑要不要加个 loading 遮罩，不然用户看着白屏，以为你网站崩了呢。 editor = new EditorJS({ holder: "editorjs", tools: { header: Header, list: List, paragraph: Paragraph }, data: { time: 1550476186479, blocks: [ { type: "header", data: { text: "欢迎使用 Editor.js", level: 2 } }, { type: "paragraph", data: { text: "这是一个在 Vue 中集成的示例。

这就涉及到数据回显了。Editor.js 提供了一个 `data` 配置项， 你把之前保存的 JSON 数据塞进去，它就能自动渲染出来。听起来很完美，对吧？ 但是注意了啊，这里有个坑。如果你的数据格式不对，或者少了个字段，编辑器可能直接就挂了或者显示不出来。而且，数据量大了之后初始化渲染会有点卡。

你得自己写个后端接口接收图片，然后返回一个 URL 给编辑器。这个过程，又是前后端联调，又是一顿扯皮。哎，做前端真难。 还有代码高亮，装个 `@editorjs/code` 就行。不过这个高亮样式可能不是你喜欢的，你还得自己去写 CSS 覆盖。这就是开源项目的常态，给你个框架，剩下的细节自己填坑。 数据回显，这可是个大坑 写完了保存，那下次打开怎么编辑呢，我直接好家伙。？

准确地说... 这时候，你就得去装插件了。Editor.js 的生态还算丰富，大体上你能想到的功能，都有人写好了插件。虽然有些插件文档写得像天书，或者干脆就是英文的，还得靠翻译软件看，但总比自己写强吧？ 比如你想加图片上传功能，你就得装 `@editorjs/image`。这个插件配置起来稍微有点麻烦，主要原因是它需要你提供一个上传图片的接口地址。

这对于现在的 CMS 系统、博客平台太重要了。你想啊，以后你要改前端样式，只要改渲染逻辑就行了数据都不用动。要是存的是 HTML，那你就等着去正则匹配替换标签吧， 火候不够。 那是地狱。 我想加图片，我想加代码，怎么办？ 光有文字和列表肯定是不够的。现在的用户，需求多着呢。他们要上传图片，要贴代码，甚至要发个表格。

市面上那些编辑器，到底谁才是老大？ 说到这里可能有人会问，市面上编辑器那么多，我为什么要选 Editor.js？这问题问得好。为了显得我很专业，我随便列个表格对比一下。虽然这种对比没什么大用，主要原因是每个项目需求都不一样，但是看着显得高大上，不是吗？ 编辑器名称 类型 数据输出 上手难度 我的主观评分 Editor.js 块级编辑器 JSON 中等 4.5/5 TinyMCE 传统富文本 HTML 简单 3.5/5 Quill 富文本编辑器 Delta / HTML 简单 4.0/5 CKEditor 5 模块化编辑器 HTML 困难 3.0/5 Slate 框架层 JSON 极难 5.0/5 看这个表格，Editor.js 的优势在于那个 JSON 输出。