tinymce-vue 插入多选框

要在 TinyMCE-Vue 中插入多选框，你可以使用自定义插件或在 TinyMCE 的菜单中添加自定义按钮来实现。下面是一个简单的示例，演示如何通过自定义按钮插入多选框。

首先，你需要创建一个自定义按钮。在 TinyMCE-Vue 中，你可以使用 `tinymce.init()` 方法的 `setup` 属性来添加自定义按钮和逻辑。以下是一个示例代码：

<template>
  <div>
    <h1>TinyMCE-Vue</h1>
    <editor
      :init="editorInit"
      v-model="content"
    ></editor>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue';

export default {
  components: {
    Editor,
  },
  data() {
    return {
      content: '',
      editorInit: {
        setup: (editor) => {
          editor.ui.registry.addButton('multiselect', {
            text: 'Insert Multiselect',
            onAction: () => {
              const selectedText = editor.selection.getContent();
              const multiselectHtml = `<select multiple>${selectedText}</select>`;
              editor.insertContent(multiselectHtml);
            },
          });
        },
      },
    };
  },
};
</script>

在上面的示例中，我们在 `setup` 方法中注册了一个名为 `'multiselect'` 的自定义按钮。在按钮的 `onAction` 回调函数中，我们获取编辑器中选中的文本，并将其包装在 `<select multiple>` 标签中，然后使用 `editor.insertContent()` 方法将多选框插入到编辑器中。

你可以根据自己的需求进一步自定义按钮的样式和功能。确保在 `editorInit` 对象中配置 `setup` 方法，以便将自定义按钮添加到 TinyMCE 编辑器中。

注意：上述代码仅提供了一个示例，可能需要根据你的实际项目进行调整和定制。