feature：代码初始化。

src/components/Editor/i18n.json

@@ -0,0 +1,60 @@
+{
+    "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": "向下移动"
+      }
+    }
+  }

src/components/Editor/index.vue

@@ -0,0 +1,123 @@
+<!-- eslint-disable no-undef -->
+<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 { 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>