vue3+wangEditor 扩展自定义菜单-多次缩进

Vue3 结合 wangEditor 是一个流行的前端编辑器组合方式。wangEditor 是一款简单易用的 Web 富文本编辑器，它可以很容易地嵌入到 Vue 应用中。如果你需要在 wangEditor 中扩展自定义菜单项以实现多次缩进的功能，可以按照以下步骤操作：

1. **安装 wangEditor**: 确保你已经将 wangEditor 安装到你的 Vue3 项目中。如果还没有安装，可以使用 npm 或 yarn 进行安装。

2. **初始化编辑器**: 在你的 Vue 组件中创建 wangEditor 实例，并将其挂载到相应的 DOM 元素上。

3. **扩展自定义菜单**: 在编辑器的配置选项中，你可以添加自定义菜单项。你需要使用 `config.onMenuAsked` 事件来动态添加菜单项，并且可以使用 `editor.command` 方法来执行具体的命令。

4. **实现缩进功能**: 为了实现多次缩进，你可能需要创建一个自定义命令，该命令可以使用编辑器的 API 来增加或减少文本的缩进级别。

下面是一个简单的示例代码，展示了如何在 Vue3 中集成 wangEditor 并扩展自定义菜单实现多次缩进的功能：

<template>
  <div>
    <div ref="editorContainer" style="height: 500px;"></div>
    <button @click="increaseIndent">增加缩进</button>
    <button @click="decreaseIndent">减少缩进</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { createEditor } from '@wangeditor/editor';

const editorContainer = ref(null);

onMounted(() => {
  const editor = createEditor({
    selector: editorContainer.value,
    config: {
      onMenuAsked: (menu) => {
        // 添加自定义菜单项
        menu.addItem({
          name: 'increaseIndent',
          text: '增加缩进',
          icon: `<i class="iconfont icon-indent">`, // 自定义图标
          exec: () => {
            // 调用自定义命令增加缩进
            increaseIndent();
          },
        });
        menu.addItem({
          name: 'decreaseIndent',
          text: '减少缩进',
          icon: `<i class="iconfont icon-outdent">`, // 自定义图标
          exec: () => {
            // 调用自定义命令减少缩进
            decreaseIndent();
          },
        });
      },
    },
  });

  function increaseIndent() {
    // 实现增加缩进的逻辑
  }

  function decreaseIndent() {
    // 实现减少缩进的逻辑
  }
});
</script>

<style>
/* 样式代码 */
</style>

在上述代码中，你需要具体实现 `increaseIndent` 和 `decreaseIndent` 函数，以便执行增加或减少缩进的逻辑。这通常涉及到编辑器的 API 调用，你可以查阅 wangEditor 的官方文档来获取具体的命令和 API 使用方法。