【Vue】vue项目中使用tinymce富文本组件（@tinymce/tinymce-vue）

<template>
  <div>
    <editor :init="tinymceInit" v-model="content"></editor>
  </div>
</template>
 
<script>
import { Editor } from '@tinymce/tinymce-vue';
import 'tinymce/models/dom/Sizzle';
import 'tinymce/models/Editor';
import 'tinymce/models/dom/DOMUtils';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/media';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/code';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textpattern';
import 'tinymce/plugins/imagetools';
import 'tinymce/plugins/preview';
import 'tinymce/themes/silver';
 
export default {
  components: {
    editor: Editor
  },
  data() {
    return {
      content: '',
      tinymceInit: {
        language: 'zh_CN',
        skin_url: 'tinymce/skins/ui/oxide',
        plugins: 'image link media table lists contextmenu wordcount code textcolor colorpicker textpattern imagetools preview',
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link image media code | removeformat',
        menubar: 'file edit view insert format tools table help',
        branding: false,
        image_advtab: true,
        image_dimensions: false,
        image_description: false,
        image_title: true,
        media_dimensions: false,
        media_live_embeds: true,
        media_embed_title: false,
        media_poster: false,
        height: 500,
        width: '100%',
      }
    };
  }
};
</script>
 
<style>
/* 在这里添加样式 */
</style>

这个代码示例展示了如何在Vue项目中使用tinymce-vue包来集成TinyMCE富文本编辑器。代码中定义了一个编辑器组件，并通过v-model进行数据双向绑定。tinymceInit对象包含了TinyMCE的初始化配置，例如语言、插件、工具栏和其他自定义设置。