wangEditor vue3工具配置隐藏

wangEditor 是一款轻量级的 Web 富文本编辑器，它提供了简单易用的接口和丰富的功能。如果你正在使用 Vue 3 并且想要配置 wangEditor 以隐藏某些工具，你可以按照以下步骤进行：

首先，确保你已经通过 npm 或 yarn 安装了 wangEditor 和它的 Vue 3 组件：

npm install wangeditor vue3-wangeditor

或者

yarn add wangeditor vue3-wangeditor

接下来，在你的 Vue 3 组件中引入编辑器并进行初始化配置。你可以通过配置项中的 `menu` 属性来定义需要显示的工具栏按钮。例如，如果你想要隐藏图片上传按钮，可以这样配置：

<template>
  <div>
    <div ref="editorContainer"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import E from 'wangeditor';

export default {
  name: 'WangEditorComponent',
  setup() {
    const editorContainer = ref(null);

    onMounted(() => {
      const editor = new E(editorContainer.value);

      // 初始化编辑器
      editor.config.onchange = (html) => {
        console.log(html);
      };

      // 配置菜单，隐藏不需要的工具，例如这里隐藏了图片上传按钮
      editor.config.menu = [
        'title', // 标题
        'bold', // 加粗
        'italic', // 斜体
        'underline', // 下划线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'undo', // 撤销
        'redo', // 重做
        // 'insertImage', // 插入图片
      ];

      // 创建编辑器
      editor.create();
    });

    return {
      editorContainer
    };
  }
};
</script>

在上面的代码中，`menu` 数组中定义了编辑器工具栏上应该显示的按钮。如果你不希望某个功能出现在工具栏上，就不要将对应的按钮名称加入到这个数组中。

需要注意的是，wangEditor 的具体 API 和配置项可能会随着版本更新而变化，因此在实际操作时，请参考你所使用的 wangEditor 版本的官方文档。