TinyMCE vue2

TinyMCE 是一个功能强大的富文本编辑器，而 Vue.js 是一个流行的 JavaScript 框架。如果你想在 Vue.js 2 中使用 TinyMCE，可以按照以下步骤进行操作：

1. 首先，你需要安装并引入 TinyMCE 的 JavaScript 文件。你可以通过在 HTML 文件中添加以下代码来实现：

<script src="https://cdn.tiny.cloud/1/{your-api-key}/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

请确保将 `{your-api-key}` 替换为你自己的 TinyMCE API 密钥。

2. 在 Vue.js 组件中，你可以创建一个包含 TinyMCE 编辑器的文本区域。你可以使用 `v-model` 指令来绑定编辑器的内容。以下是一个示例：

<template>
  <div>
    <textarea id="my-editor" v-model="content"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
    };
  },
  mounted() {
    tinymce.init({
      selector: '#my-editor',
      plugins: 'advlist autolink lists link image charmap print preview anchor',
      toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image',
      height: 500,
      setup: (editor) => {
        editor.on('change', () => {
          this.content = editor.getContent();
        });
      },
    });
  },
  beforeDestroy() {
    tinymce.remove('#my-editor');
  },
};
</script>

在上述示例中，我们创建了一个带有 `id="my-editor"` 的文本区域，并使用 `v-model` 指令将其内容绑定到 Vue 实例中的 `content` 数据属性上。在 `mounted` 钩子函数中，我们初始化了 TinyMCE 编辑器，并设置了一些插件、工具栏选项和高度。通过监听 `change` 事件，我们可以在编辑器内容发生变化时更新 Vue 实例的 `content` 属性。最后，在组件销毁之前，我们需要将编辑器移除以避免内存泄漏。

请确保在组件内正确引入 TinyMCE 和 Vue.js 的依赖，并根据你的需求进行进一步的配置和样式调整。希望这能帮到你！如果你有任何进一步的问题，请随时提问。