wangEditor5 在一个js文件中自定义的按钮，并插入到了编辑器中，点击事件如何在.vue文件中监听

在 Vue.js 中监听来自 WangEditor5 自定义按钮的点击事件，你需要遵循以下步骤：

1. **在`.js`文件中创建自定义按钮组件**:
首先，在单独的 `.js` 文件中定义一个 Vue 组件，比如 `CustomButton.vue`，其中包含按钮模板和事件处理函数:

// CustomButton.vue
export default {
  name: 'CustomButton',
  props: { // 传入到编辑器的按钮属性
    label: String,
    onClick: { // 接收外部点击事件的回调函数
      type: Function,
      required: true,
    }
  },
  template: `
    <button @click="handleClick">
      {{ label }}
    </button>
  `,
  methods: {
    handleClick() {
      this.onClick(); // 触发外部传入的 click 事件
    }
  }
}

2. **注册和使用自定义组件**:
在 `.js` 文件中导入该组件，并在 `.vue` 文件的 `components` 中注册。然后在编辑器初始化时，使用 Vue 的 `ref` 注册一个引用，以便在 `.vue` 文件中访问编辑器实例:

import CustomButton from './CustomButton.vue';

// 在编辑器初始化的地方
export default {
  components: {
    CustomButton
  },
  setup() {
    const editor = ref(null); // 初始化编辑器
    const addCustomButton = () => {
      // 将自定义按钮添加到编辑器
      editor.value.appendModule('custom', {
        buttons: [
          { text: 'Custom Button', action: () => handleButtonClick(editor.value) },
        ],
      });
      
      // 在这里编写 handleButtonClick 函数，它应该从 .vue 文件外部调用
      function handleButtonClick(editorInstance) {
        this.$emit('custom-button-clicked'); // 触发外部监听的事件
      }
    };

    return { editor, addCustomButton };
  },
};

3. **在`.vue`文件中监听事件**:
在 `.vue` 文件中监听名为 `custom-button-clicked` 的事件，以便在点击自定义按钮时触发相应的业务逻辑:

<template>
  <div>
    <wang-editor :ref="editor"></wang-editor>
    <!-- ... -->
    <CustomButton label="自定义按钮" @custom-button-clicked="onCustomButtonClick" />
  </div>
</template>

<script>
import CustomButton from './CustomButton.vue';

export default {
  components: {
    CustomButton,
  },
  methods: {
    onCustomButtonClick() {
      console.log('Custom button clicked!');
      // 在这里处理按钮点击后的具体逻辑
    },
  }
};
</script>

现在，每次点击自定义按钮时，`onCustomButtonClick` 方法会在 `.vue` 文件中被调用。记得替换 `console.log` 为实际需要执行的操作。