vue2在TinyMCE工具栏和正文中间插入自己的input

在 Vue.js 中，尤其是 Vue2，如果你想在 TinyMCE 的编辑区域和正文之间插入自定义的输入框，你可以这样做：

首先，你需要安装和配置 TinyMCE。在你的项目中引入TinyMCE库，并在Vue组件中初始化它。例如：

<template>
  <div>
    <tinymce
      :config="tinymceConfig"
      @init="editorInit"
    ></tinymce>
    <div class="custom-input">
      <input type="text" v-model="customValue" />
    </div>
    <textarea v-model="content"></textarea> <!-- 这里展示原始文本 -->
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce.es5.min';

export default {
  data() {
    return {
      tinymceConfig: {
        selector: 'textarea', // 编辑器将附加到这个元素上
        plugins: [
          ... // 配置需要的TinyMCE插件
        ],
      },
      content: '', // 原始文本
      customValue: '', // 自定义输入框的值
    };
  },
  methods: {
    editorInit(editor) {
      this.editor = editor;
      // 当TinyMCE初始化完成后，你可以访问到editor实例
    },
  },
};
</script>

<style scoped>
.custom-input {
  position: relative; /* 保持位置相对 */
  margin-bottom: 10px; /* 添加间距 */
}
</style>

在这个例子中，我们创建了一个自定义的`input`标签并绑定到了`v-model`，当用户输入时，`customValue`会同步更新。TinyMCE的`textarea`用于显示最终编辑后的内容。

然后，在`editorInit`方法中，你可以通过`editor.selection.getContent()`获取当前选区的内容，如果需要在TinyMCE插入新的节点，可以使用`editor.insertContent`方法。