vue2在TinyMCE工具栏和正文区域添加自己的input

在Vue2中，要向TinyMCE编辑器的工具栏和正文区域添加自定义输入，首先需要安装TinyMCE的Vue插件并配置好基础的编辑器实例。以下是一个简单的步骤说明：

1. **安装TinyMCE Vue插件**：
使用npm安装`@tinymce/tinymce-vue`：

   npm install @tinymce/tinymce-vue

2. **创建TinyMCE编辑器组件**：
在`.vue`文件中，导入TinyMCE并配置它，例如：

   <template>
     <div>
       <tinymce :config="tinymceConfig" v-model="content"></tinymce>
       <!-- 在这里添加你的输入元素 -->
       <input type="text" v-model="customInput" />
     </div>
   </template>

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

   export default {
     components: { tinymce },
     data() {
       return {
         content: '',
         customInput: '',
         tinymceConfig: {
           selector: 'textarea', // 选择编辑器的容器
           plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak',
                     'searchreplace wordcount visualblocks code fullscreen'], // 配置插件
           toolbar: 'insertfile undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', // 工具栏设置
         }
       };
     }
   }
   </script>

这里我们添加了一个文本输入框，并将用户输入绑定到`customInput`数据属性。

3. **使用自定义输入**：
当你需要在工具栏上显示这个输入时，可以考虑使用`editor.on('init')`事件，在初始化完成后动态添加按钮。不过，TinyMCE的API可能会有变化，最好查阅官方文档确认如何操作。