vue3使用富文本编辑器Editor.js的简单方法
作者：_Legend_King
一、安装 Editor.js
npm i @editorjs/editorjs --save
二、在页面中引入并使用
样式就不发了，自己按自己的来
三、转换语言，默认是英文
editor = new EditorJS({
holder: this.$refs.editor,
// 自动聚焦
autofocus: true,
// 其他配置...
tools: {
},
i18n: {
messages: {
ui: {
blockTunes: {
toggler: {
'Click to tune': '点击转换'
}
},
inlineToolbar: {
converter: {
'Convert to': '转换'
}
},
toolbar: {
toolbox: {
Add: '工具栏添加'
}
},
popover: {
'Filter': '过滤',
'Nothing found': '找不到',
"Enter a code": "输入代码"
}
},
toolNames: {
"Text": "文本",
"Heading": "标题",
"List": "列表",
"Warning": "警告",
"Checklist": "清单",
"Quote": "引用",
"Code": "代码",
"Delimiter": "分隔符",
"Raw HTML": "原始 HTML",
"Table": "表格",
"Link": "链接",
"Marker": "标记",
"Bold": "粗体",
"Italic": "斜体",
"InlineCode": "内联代码",
"Image": "图片"
},
tools: {
"paragraph": {
'Press Tab': '输入内容',
},
"warning": { // <-- 'Warning' tool will accept this dictionary section
"Title": "标题",
"Message": "消息",
},
"link": {
"Add a link": "添加连接"
},
"code": {
"Enter a code": "输入代码"
},
"image": {
"Add border": "添加边框",
"With border": "有边框",
"Stretch image": "拉伸图像",
"With background": "有背景",
"Add background": "添加背景"
},
"list": {
"Ordered": "有序",
"Unordered": "无序"
}
},
blockTunes: {
// Section allows to translate Block Tunes
"delete": {
"Delete": "删除",
"Click to delete": "点击删除"
},
"moveUp": {
"Move up": "上移"
},
"moveDown": {
"Move down": "下移"
}
},
}
},
});四、标题
其余功能需自行安装，引入
npm install @editorjs/header
import Header from '@editorjs/header';
// 其他配置
tools: {
header: {
class: Header,
config: {
placeholder: '输入标题',
levels: [1, 2, 3, 4], // 可转换的标题
defaultLevel: 1 // 默认标题
}
},
}五、图片有两种，可拖拽上传处理
- 简单的图像（无后端要求）
- 图像
配置官网有具体文档，若不清楚请留言
Editor.jsFree block-style editor with a universal JSON output
以下是一些 Editor.js 的特点和优势：
块结构：Editor.js 采用了块结构的概念，将内容分解为可独立操作和样式化的不同块，如段落、标题、图像、列表等。这种结构使得对内容的编辑和扩展变得更加直观和灵活。
嵌套块：不仅可以创建单一块的内容，还可以在块内部创建嵌套结构，构建复杂的内容组合。例如，你可以在段落块中嵌套标题、列表或引用块等。
简洁的用户界面：Editor.js 的用户界面被设计成简洁、直观且易于使用。用户可以通过简单的操作来创建、编辑和删除块，不需要关注复杂的标记语法或样式细节。
开放的插件系统：Editor.js 提供了一个强大的插件系统，允许开发人员创建自定义块类型和扩展编辑器功能。你可以根据需要编写自己的块插件，并将其集成到编辑器中，以满足特定的编辑需求。
丰富的内容保存：Editor.js 使用 JSON 格式保存编辑器的内容。这种格式简单易懂，便于存储和传输，同时保留了块结构和样式的信息。你可以将编辑器的内容保存到数据库中，然后在需要时重新加载。
可扩展的主题和样式：Editor.js 的外观和样式可以根据你的品牌和设计需求进行定制。你可以创建自己的主题或使用现有的主题来改变编辑器的外观。
多语言支持：Editor.js 支持多种语言，可以轻松地切换编辑器的显示语言或自定义特定术语的翻译。
总结
到此这篇关于vue3使用富文本编辑器Editor.js的文章就介绍到这了,更多相关vue3富文本编辑器Editor.js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！