在 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，首先需要安装核心包和常用工具插件，例如标题、段落、列表等。
npm install @editorjs/editorjs @editorjs/header @editorjs/list @editorjs/paragraph常见插件包括：
@editorjs/header：标题@editorjs/list：有序/无序列表@editorjs/paragraph：段落（Editor.js 默认自带，但单独引入更灵活）
如果需要图片上传、代码高亮等功能，可以根据需求安装对应插件。
三、在 Vue 中创建 Editor 组件
这里以 Vue 3 + Composition API 为例，封装一个简单的 Editor.vue 组件。
<template>
<div>
<!-- 编辑器容器 -->
<div id="editorjs"></div>
<!-- 保存按钮 -->
<button @click="saveData">保存内容</button>
</div>
</template>
<script setup>
import { onMounted, onBeforeUnmount } from "vue";
import EditorJS from "@editorjs/editorjs";
import Header from "@editorjs/header";
import List from "@editorjs/list";
import Paragraph from "@editorjs/paragraph";
let editor = null;
onMounted(() => {
editor = new EditorJS({
holder: "editorjs", // 容器 ID
autofocus: true,
placeholder: "开始书写你的内容...",
tools: {
header: Header,
list: List,
paragraph: {
class: Paragraph,
inlineToolbar: true
}
}
});
});
// 组件卸载时销毁编辑器
onBeforeUnmount(() => {
if (editor) {
editor.destroy();
editor = null;
}
});
// 保存方法
const saveData = async () => {
try {
const outputData = await editor.save();
console.log("编辑内容：", outputData);
alert(JSON.stringify(outputData, null, 2));
} catch (error) {
console.error("保存失败：", error);
}
};
</script>这段代码完成了：
- 初始化 Editor.js 实例，并指定容器
#editorjs。 - 配置了
header、list、paragraph三个基础工具。 - 提供保存按钮，输出 JSON 格式数据。
四、数据渲染与回显
在实际业务中，用户可能需要二次编辑已保存的内容。Editor.js 支持通过 data 参数进行内容回显。
editor = new EditorJS({
holder: "editorjs",
tools: {
header: Header,
list: List,
paragraph: Paragraph
},
data: {
time: Date.now(),
blocks: [
{
type: "header",
data: {
text: "欢迎使用 Editor.js",
level: 2
}
},
{
type: "paragraph",
data: {
text: "这是一个在 Vue 中集成的示例。"
}
}
]
}
});这样，加载编辑器时会自动填充已有内容。
五、常见问题与解决方案
- 编辑器样式丢失？ 需要确保 CSS 正确加载。Editor.js 自身依赖少，大部分样式由插件提供。
- 如何上传图片？
需要使用
@editorjs/image插件，并配置uploader方法，与后端接口对接。 - Vue Router 切换页面后报错？
确保在
onBeforeUnmount钩子中调用editor.destroy()，避免内存泄漏。 - SSR 支持？ 由于 Editor.js 依赖 DOM，需要在客户端环境下动态加载，可以结合 Nuxt 动态导入使用。
六、总结
Editor.js 相比传统富文本编辑器，更适合需要 结构化数据存储与二次渲染 的场景，例如知识库、内容管理系统、在线文档等。通过简单的封装，就能在 Vue 项目中快速集成，并支持灵活扩展。
如果你的项目对 内容结构化、可扩展性 有较高要求，那么 Editor.js 无疑是一个值得尝试的现代化编辑器。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
