vue tinymce

<template>
  <div>
    <editor
      api-key="your-api-key"
      v-model="content"
      :init="editorInit"
    />
  </div>
</template>

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

export default {
  components: {
    Editor
  },
  data() {
    return {
      content: '<p>初始内容</p>',
      editorInit: {
        height: 500,
        menubar: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar:
          'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
      }
    };
  }
};
</script>

<style scoped>
/* 可以在这里添加一些样式 */
</style>

解释说明：

1. 模板部分 (<template>)：

   • 使用了 <editor> 组件，并绑定了 v-model 到 content，这样可以双向绑定编辑器的内容。
   • api-key 是 TinyMCE 的 API 密钥，你需要替换为自己的密钥。

2. 脚本部分 (<script>)：

   • 引入了 @tinymce/tinymce-vue 组件库。
   • 在 components 中注册了 Editor 组件。
   • data 函数返回了一个对象，包含 content 和 editorInit。content 是编辑器的初始内容，editorInit 包含了 TinyMCE 的初始化配置选项，如高度、插件、工具栏等。

3. 样式部分 (<style scoped>)：

   • 这里可以添加一些自定义样式，作用范围仅限于当前组件。

如果你需要进一步定制 TinyMCE 的功能或样式，可以参考 TinyMCE 官方文档。