如何在 Vue 中使用 Editor.js 集成实现编辑器功能？

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

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

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

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

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

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

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

好了废话不多说我们直接进入正题。