vue3中使用editor.js

第一步安装依赖

npm i @editorjs/editorjs --save

第二步创建editor.vue插件

<template><div><div id="editorjs" :style="'width:' + props.width + 'px;height:' + props.height + 'px;'"></div></div>
</template>
<script setup>
// 标题（Header）：用于设置文本的标题级别，支持多级标题。
// 段落（Paragraph）：用于添加普通文本段落。
// 引用（Quote）：用于添加引用文本块。
// 列表（List）：支持有序列表和无序列表。
// 图像（Image）：可以插入图片，并指定图片的来源、标题和描述等属性。
// 插入链接（Link）：可以插入超链接，指定链接的URL、标题和打开方式等。
// 视频（Embed）：可以插入媒体内容的外部嵌入代码或链接。
// 表格（Table）：可以创建简单的表格，指定表格行数和列数。
// 代码（Code）：用于插入代码块，支持多种编程语言的语法高亮。
// 内容警告（Warning）：用于突出显示重要提示或警告。
// 勾选框（Checklist）：用于创建待办事项列表，可以勾选完成状态。
// 分割线（Delimiter）：用于在内容中插入水平分割线。
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Paragraph from '@editorjs/paragraph';
import Quote from '@editorjs/quote';
import Image from '@editorjs/image';
import Embed from '@editorjs/embed';
import Table from '@editorjs/table';
import Code from '@editorjs/code';
import Delimiter from '@editorjs/delimiter';import zh from './i18n.json'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = useStore()
const { ctx, proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue'])
const props = defineProps({modelValue: {type: String,default: "",},width: {type: Number,default: 500,},height: {type: Number,default: 500,},
})
const editor = ref(null)const saveEditor = () => {editor.value.save().then((outputData) => {console.log(outputData)}).catch((error) => {console.log(error)});
}
const { data } = toRefs(reactive({//定义数组和对象data: ''
}))
onMounted(() => {editor.value = new EditorJS({holder: 'editorjs',//应该包含编辑器的元素Id// autofocus: true,//自动获取焦点placeholder: '请输入内容',i18n: {messages: zh},logLevel: 'VERBOSE',//日志级别   VERBOSE显示所有消息(默认) INFO显示信息和调试消息 WARN只显示警告消息 ERROR只显示错误信息readOnly: false,//只读模式tools: {//工具列表header: {class: Header,inlineToolbar: ['link']},list: {class: List,inlineToolbar: true},paragraph: {class: Paragraph,inlineToolbar: true},quote: {class: Quote,inlineToolbar: true},// image: SimpleImage,image: {class: Image,inlineToolbar: true},embed: {class: Embed,inlineToolbar: true},table: {class: Table,inlineToolbar: true},code: {class: Code,inlineToolbar: true},delimiter: {class: Delimiter,inlineToolbar: true},},onReady: () => {console.log('Editor.js is ready to work!')},})console.log(editor.value);
})
// watch(propData,(newVal,oldVal)=>{})
defineExpose({ saveEditor })
</script><style scoped></style>

创建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": "向下移动"}}
}

在页面引入组件

<template><div class="editorBox"><editorJs ref="editorRef" :width="700" :height="1000" v-model="data"></editorJs><el-button @click="save">保存</el-button></div>
</template>
<script setup>
import editorJs from '@/components/Editor/editorJs'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const store = useStore()
const { ctx, proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue'])
const props = defineProps({propData: {type: String,default: '',},
})
const { data } = toRefs(reactive({//定义数组和对象data: ''
}))
const editorRef = ref(null)//定义普通类型
function save() {editorRef.value.saveEditor()
}// onMounted(() => {})
// watch(propData,(newVal,oldVal)=>{})
</script><style scoped>
.editorBox {padding: 40px;width: 700px;background-color: #fff;margin: 50px auto auto;box-shadow: 0 1px 4px rgba(0, 0, 0, .04), 0 4px 10px rgba(0, 0, 0, .08);
}
</style>

这只是一个简单的示例,具体配置请去官网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 支持多种语言，可以轻松地切换编辑器的显示语言或自定义特定术语的翻译。