在 Vue 中使用 Editor.js：从集成到实战

在前端开发中，富文本编辑器几乎是很多项目的标配，例如 CMS 系统、博客平台、论坛和在线文档。相比传统的富文本编辑器（如 TinyMCE、CKEditor），Editor.js 以 块级编辑器（Block Style Editor） 的形式出现，更专注于结构化内容，适合现代 Web 应用的内容存储与展示。

本文将带你一步步在 Vue 项目中集成 Editor.js，并给出实际使用示例。

一、为什么选择 Editor.js？

• 结构化数据输出：不同于传统 HTML 格式的输出，Editor.js 输出的是 JSON 数据，更利于存储、渲染与二次处理。
• 高度可扩展：插件化设计，几乎所有功能（标题、列表、图片、代码块等）都由插件提供。
• 用户体验好：轻量化、界面清爽，编辑体验接近 Medium、Notion。
• 对 Vue 友好：虽然不是专门为 Vue 封装，但通过简单封装即可无缝集成。

二、安装依赖

在 Vue 项目中使用 Editor.js，首先需要安装核心包和常用工具插件，例如标题、段落、列表等。

代码语言：bash

AI代码解释

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

常见插件包括：

• @editorjs/header：标题
• @editorjs/list：有序/无序列表
• @editorjs/paragraph：段落（Editor.js 默认自带，但单独引入更灵活）

如果需要图片上传、代码高亮等功能，可以根据需求安装对应插件。