vue3使用富文本编辑器 Editor.js

<template>
  <div ref="editorJsContainer"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import EditorJS from '@editorjs/editorjs';
 
const editorJsContainer = ref(null);
let editor = null;
 
onMounted(() => {
  // 初始化 Editor.js
  editor = new EditorJS({
    holder: editorJsContainer.value,
    // 这里的tools配置需要根据实际需求来设置
    tools: {
      header: Header,
      list: List,
      image: Image,
    },
    // 其他配置...
  });
});
</script>

这段代码演示了如何在Vue 3中使用Editor.js。首先，我们通过<script setup>标签引入必要的Vue特性。然后，我们创建一个ref属性editorJsContainer来作为Editor.js的挂载点。在onMounted生命周期钩子中，我们初始化Editor.js实例，并传入配置，包括工具集（tools）和其他配置项。这个例子中的工具集仅包含了几个常用的工具，实际使用时需要根据实际需求来配置。