tinymce vue

<template>
  <div>
    <editor v-model="content" :init="editorInit"></editor>
  </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>):

   • 使用了一个 div 包裹 Tinymce 编辑器组件。
   • v-model 绑定了编辑器的内容到 content 数据属性。
   • :init 绑定了初始化配置对象 editorInit。

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

   • 导入了 @tinymce/tinymce-vue 包，并注册为组件。
   • 定义了 data 函数，返回一个包含初始内容和编辑器配置的对象。
     • content: 编辑器的初始内容。
     • editorInit: 编辑器的初始化配置，包括高度、插件、工具栏等。

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

   • 这里可以根据需要添加特定的样式，当前为空。

这个示例展示了如何在 Vue 项目中集成 Tinymce 富文本编辑器，并进行基本配置。