Editor.js 开源富文本编辑器试用理解心得

谈谈优点🏆

块结构设计灵活：

基于块（Blocks）的内容编辑架构，例如文本段落、标题、图片、列表、嵌入内容（如视频、推文等）都可作为独立的块进行编辑、拖动、排序等操作，块状结构对我们很友好🚲，很适合用于创作复杂且有条理的文档，像长篇文章、博客、专业报告等

输出格式标准化：

支持导出多种标准化的数据格式，比如 JSON，这使得它能方便地与其他系统进行对接和集成，开发人员可以基于其输出的结构化数据进行后续处理，如在不同的平台、应用程序之间传递内容，利于内容的复用和分发

插件生态丰富：

有着大量的官方及第三方插件让你任意选择，能够轻松扩展其功能。比如添加特殊的图表插件用于展示数据可视化内容，或者使用代码高亮插件来更好地展示代码示例等，满足不同用户群体和多样化的使用场景需求

界面简洁易用：

整体的编辑界面简洁直观，没有过多复杂冗余的功能按钮堆砌，对于新手用户来说容易上手，同时专业编辑人员也能快速聚焦于内容创作本身，减少因复杂界面而带来的干扰，在豆包上发现一个熟悉的影子🤩

注重内容语义：

区别于一些传统只注重样式的编辑器，它更强调内容的语义化，每个块都带有明确的内容类型属性，有助于提升内容的可访问性以及后续基于语义的自动化处理

一些欠缺🤔

主要问题是赖我🚔

学习成本对于简单需求稍高：

如果只是想进行简单的纯文本编辑，它相对一些轻量级纯文本编辑器，学习其块操作、插件使用等功能就显得有些复杂了，存在一定的学习成本，我也懒得学🐒

依赖开发集成才能发挥最大优势：

虽然输出格式便于开发对接，但对于没有开发能力的普通个体用户来说，如果想深度定制或者实现更个性化的功能拓展，比如和自己的网站后端进行深度交互等，可能会面临一定困难，需要一定的技术支持

使用方法

1. 引入资源：

通常可以通过在 HTML 文件中引入相应的 CSS 和 JavaScript 文件来在网页项目中使用 Editor.js。

例如从官方 CDN 引入，也可以下载文件后本地引入，像这样：

<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>

2. 初始化编辑器：

在 HTML 页面中创建一个容器元素（比如 `<div>`），然后通过 JavaScript 代码来初始化 Editor.js，示例代码如下：

<div id="editorjs"></div><script> const editor = new EditorJS({ holder: 'editorjs', // 对应容器元素的 ID // 可以在这里配置各种参数，如添加插件等 }); </script>

3. 配置插件：

如果需要使用插件来扩展功能，可以在初始化时的参数配置中添加插件相关配置。例如，要使用 Embed 插件来嵌入外部内容，代码可以这样写：

<script> const editor = new EditorJS({   holder: 'editorjs',   tools: {     embed: {       class: Embed,       config: {         services: {youtube: true, // 启用嵌入 YouTube 视频功能等}       }     }   } }); </script>

4. 内容操作：

- 可以在初始化后的编辑器中进行内容的添加、编辑操作，像输入文本块、插入图片块（通过相应插件支持）、调整块的顺序等。– 当需要获取内容时，可以调用编辑器的 `save()` 方法，它会返回一个 Promise，解析后的结果通常是按照其规定格式（如 JSON）组织的数据，示例：

<script> editor.save().then((outputData) => {console.log(outputData); }); </script>

5. 样式定制：

如果想改变编辑器的外观样式，可以通过覆盖其默认的 CSS 类样式或者添加自定义的 CSS 规则来实现，以使其与项目整体的视觉风格相匹配。总的来说，Editor.js 适合有一定结构化内容创作需求、注重内容语义和需要与其他系统集成的用户群体，无论是个人博客作者、内容运营团队还是开发人员等都能利用它的特性来更好地进行内容的创作和管理。