smartai2dian0/src/components/Editor_v1.vue

<template>
  <div id="toolbar"></div>
  <div ref="editorRef" style="border: 1px solid #ccc; height: 500px"></div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import { createEditor, createToolbar, Boot } from '@wangeditor/editor';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css

const editorRef = ref(null);
let editor = null;
let toolbarEditor = null;

onMounted(() => {
  if (editorRef.value) {
    editor = createEditor({ selector: editorRef.value });
    toolbarEditor = createToolbar({
      editor,
      selector: '#toolbar' // 确保有一个id为toolbar的DOM元素
    });
  }
  console.log('editor', editor);
  console.log(Boot);
});

onUnmounted(() => {
  if (editor) {
    editor.destroy(); // 销毁编辑器实例
  }
  if (toolbarEditor) {
    toolbarEditor.destroy(); // 销毁工具栏实例（如果有的话）
  }
});

//自定义菜单
class MyButtonMenu {
  // JS 语法

  constructor(title, iconSvg, tag, exec) {
    this.title = title; // 自定义菜单标题
    this.iconSvg = iconSvg; // 自定义菜单的svg
    this.tag = tag; //自定义菜单的类型
    this.exec = exec; //自定义菜单点击的方法
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    // JS 语法
    return ' hello ';
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    // JS 语法
    return false;
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    // JS 语法
    return false;
  }

  // 点击菜单时触发的函数
  // exec(editor, value) {                              // JS 语法
  //     if (this.isDisabled(editor)) return
  //     editor.insertText(value) // value 即 this.value(editor) 的返回值
  // }
}
</script>