富文本编辑器tinymce在vue中的安装及使用

1.安装tinymce插件命令

npm i tinymce @packy-tang/vue-tinymce

2.在main.js文件中全局引入tinymce相关文件（看项目需要，也可以在需要的组件中按需引入）

import tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'
Vue.prototype.$tinymce = tinymce
Vue.use(VueTinymce)

3.到node_modules目录下找到tinymce文件夹，复制到public目录下；

4.在public目录下新建langs文件夹，在里面新建zh-Hans.js文件处理中文。网址：[https://www.tiny.cloud/get-tiny/language-packages/]

5.找到public目录下index.html文件，在body中添加

<script src="/tinymce/tinymce.min.js"></script>

6.页面使用

 <div class="tinymce-editor">
    <vue-tinymce ref="editor"
                 class="editor overflow-scroll"
                 v-model="content"
                 :setting="setting" />
  </div>

7.在data数据中对富文本进行配置

setting: {
        branding: false, // 隐藏品牌，隐藏状态栏中显示的“ Powered by Tiny ”链接
        inline: false, // 设置内敛模式
        menubar: true,
        autosave_restore_when_empty: true,
        save_enablewhendirty: true,
        autoresize_on_init: true,
        draggable_modal: true,
        toolbar: "code undo redo | quickimage forecolor backcolor bold italic underline strikethrough anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table  charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs |",
        plugins: "print quickbars preview searchreplace autolink directionality visualblocks visualchars fullscreen image imagetools link  code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs uploadimage",
        language: "zh-Hans", // 语言，汉化
        resize: true, // 是否可以缩放编辑器
        elementpath: false, // 在编辑器底部的状态栏中禁用元素路径。
        quickbars_insert_toolbar: false, // 光标右侧选项栏
        promotion: false,
        min_height: 400,
        max_height: 650,
        quickbars_insert_toolbar: false, // 光标右侧选项栏
        quickbars_selection_toolbar: 'bold italic underline strikethrough forecolor backcolor',
        // images_upload_handler: function (blobInfo, succFun, failFun) { //需要转oos的话
        //   var file = blobInfo.blob()
        //   // xxxxxxxxx写文件目录
        //   let fileName = formatOosPath('xxxxx/xxxxxxxxxx', file.name)
        //   return new Promise((resolve) => {
        //     oosUtil.putFile(file, fileName).then((res) => {
        //       oosUtil.previewUrl(res, true).then((rel) => {
        //         return resolve(rel)
        //       })
        //     })
        //   })
        // }
      },