第一步安装依赖
npm i @editorjs/editorjs --save
第二步创建editor.vue插件
创建i18n翻译文件 i18n.json
{
"ui": {
"blockTunes": {
"toggler": {
"Click to tune": "点击调整",
"or drag to move": "或者拖动移动"
}
},
"inlineToolbar": {
"converter": {
"Convert to": "转换为"
}
},
"toolbar": {
"toolbox": {
"Add": "添加"
}
}
},
"toolNames": {
"Text": "文本",
"Heading": "标题",
"List": "列表",
"Warning": "警告",
"Checklist": "清单",
"Quote": "引用",
"Code": "代码",
"Delimiter": "分隔符",
"Raw HTML": "原始HTML",
"Table": "表格",
"Link": "链接",
"Marker": "标记",
"Bold": "加粗",
"Italic": "斜体",
"Image": "图片"
},
"tools": {
"warning": {
"Title": "标题",
"Message": "消息"
},
"link": {
"Add a link": "添加链接"
},
"stub": {
"The block can not be displayed correctly.": "该块不能正确显示"
}
},
"blockTunes": {
"delete": {
"Delete": "删除"
},
"moveUp": {
"Move up": "向上移动"
},
"moveDown": {
"Move down": "向下移动"
}
}
}
在页面引入组件
这只是一个简单的示例,具体配置请去官网Editor.js (editorjs.io)
Editor.js 在其核心设计中不直接包含一个传统的“顶部工具栏”。它的设计理念是简洁、无干扰的用户体验，焦点是在“块”内容上，而非传统的富文本编辑器的样式。因此，Editor.js 的默认设置下，不会显示类似 Word 或其他传统编辑器的顶部工具栏。
说一下我的心得:官方文档对中文及其不友好,不建议使用这个编辑器,除非你有大量时间来开发研究
Editor.js 是一个用于构建具有完全可定制化块结构的现代编辑器的开源库。它提供了一个简洁、可扩展和易于使用的接口，使开发人员能够创建拥有丰富内容和互动性的编辑器。
以下是一些 Editor.js 的特点和优势：
块结构：Editor.js 采用了块结构的概念，将内容分解为可独立操作和样式化的不同块，如段落、标题、图像、列表等。这种结构使得对内容的编辑和扩展变得更加直观和灵活。 嵌套块：不仅可以创建单一块的内容，还可以在块内部创建嵌套结构，构建复杂的内容组合。例如，你可以在段落块中嵌套标题、列表或引用块等。 简洁的用户界面：Editor.js 的用户界面被设计成简洁、直观且易于使用。用户可以通过简单的操作来创建、编辑和删除块，不需要关注复杂的标记语法或样式细节。 开放的插件系统：Editor.js 提供了一个强大的插件系统，允许开发人员创建自定义块类型和扩展编辑器功能。你可以根据需要编写自己的块插件，并将其集成到编辑器中，以满足特定的编辑需求。 丰富的内容保存：Editor.js 使用 JSON 格式保存编辑器的内容。这种格式简单易懂，便于存储和传输，同时保留了块结构和样式的信息。你可以将编辑器的内容保存到数据库中，然后在需要时重新加载。 可扩展的主题和样式：Editor.js 的外观和样式可以根据你的品牌和设计需求进行定制。你可以创建自己的主题或使用现有的主题来改变编辑器的外观。 多语言支持：Editor.js 支持多种语言，可以轻松地切换编辑器的显示语言或自定义特定术语的翻译。
总而言之，Editor.js 是一个功能强大、灵活且易于使用的编辑器库，适用于构建各种应用程序中的富文本编辑功能，如内容管理系统、博客平台、电子商务平台等。它提供了现代化的编辑体验，同时让开发人员能够自由定制编辑器以满足个性化需求。
参考链接
您阅读本篇文章共花了：
发表评论