npm i @editorjs/editorjs --save

<template>
  <div>
    <div id="editorjs" :style="'width:' + props.width + 'px;height:' + props.height + 'px;'"></div>
  </div>
</template>
<script setup>
// 標(biāo)題（Header）：用于設(shè)置文本的標(biāo)題級(jí)別，支持多級(jí)標(biāo)題。
// 段落（Paragraph）：用于添加普通文本段落。
// 引用（Quote）：用于添加引用文本塊。
// 列表（List）：支持有序列表和無(wú)序列表。
// 圖像（Image）：可以插入圖片，并指定圖片的來(lái)源、標(biāo)題和描述等屬性。
// 插入鏈接（Link）：可以插入超鏈接，指定鏈接的URL、標(biāo)題和打開(kāi)方式等。
// 視頻（Embed）：可以插入媒體內(nèi)容的外部嵌入代碼或鏈接。
// 表格（Table）：可以創(chuàng)建簡(jiǎn)單的表格，指定表格行數(shù)和列數(shù)。
// 代碼（Code）：用于插入代碼塊，支持多種編程語(yǔ)言的語(yǔ)法高亮。
// 內(nèi)容警告（Warning）：用于突出顯示重要提示或警告。
// 勾選框（Checklist）：用于創(chuàng)建待辦事項(xiàng)列表，可以勾選完成狀態(tài)。
// 分割線（Delimiter）：用于在內(nèi)容中插入水平分割線。
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({
  //定義數(shù)組和對(duì)象
  data: ''
}))
onMounted(() => {
  editor.value = new EditorJS({
    holder: 'editorjs',//應(yīng)該包含編輯器的元素Id
    // autofocus: true,//自動(dòng)獲取焦點(diǎn)
    placeholder: '請(qǐng)輸入內(nèi)容',
    i18n: {
      messages: zh
    },
    logLevel: 'VERBOSE',//日志級(jí)別   VERBOSE顯示所有消息(默認(rèn)) INFO顯示信息和調(diào)試消息 WARN只顯示警告消息 ERROR只顯示錯(cuò)誤信息
    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>

{
  "ui": {
    "blockTunes": {
      "toggler": {
        "Click to tune": "點(diǎn)擊調(diào)整",
        "or drag to move": "或者拖動(dòng)移動(dòng)"
      }
    },
    "inlineToolbar": {
      "converter": {
        "Convert to": "轉(zhuǎn)換為"
      }
    },
    "toolbar": {
      "toolbox": {
        "Add": "添加"
      }
    }
  },
  "toolNames": {
    "Text": "文本",
    "Heading": "標(biāo)題",
    "List": "列表",
    "Warning": "警告",
    "Checklist": "清單",
    "Quote": "引用",
    "Code": "代碼",
    "Delimiter": "分隔符",
    "Raw HTML": "原始HTML",
    "Table": "表格",
    "Link": "鏈接",
    "Marker": "標(biāo)記",
    "Bold": "加粗",
    "Italic": "斜體",
    "Image": "圖片"
  },
  "tools": {
    "warning": {
      "Title": "標(biāo)題",
      "Message": "消息"
    },
    "link": {
      "Add a link": "添加鏈接"
    },
    "stub": {
      "The block can not be displayed correctly.": "該塊不能正確顯示"
    }
  },
  "blockTunes": {
    "delete": {
      "Delete": "刪除"
    },
    "moveUp": {
      "Move up": "向上移動(dòng)"
    },
    "moveDown": {
      "Move down": "向下移動(dòng)"
    }
  }
}

<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({
  //定義數(shù)組和對(duì)象
  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>