vue中使用TinyMCE

安装

首页安装tinymce

npm install --save tinymce

再直接使用官方集成好的组件tinymce-vue

// For Vue.js 3.x users:
npm install --save "@tinymce/tinymce-vue@^4"
// For Vue.js 2.x users:
npm install --save "@tinymce/tinymce-vue@^3"

初始化

 <template>
   <div id="app">
     <editor
       v-model="myValue"
       :init="init"
     />
   </div>
 </template>

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

 export default {
   name: 'app',
   components: {
     Editor
   },
   data() {
     return {
       init: {
         language_url: '/tinymce/langs/zh_CN.js',
         language: 'zh_CN',
         skin_url: '/tinymce/skins/lightgray',
         plugins: 'autoresize autolink lists advlist lineheight image link table paste',
         toolbar: 'forecolor backcolorstrikethrough | bullist numlist | image link | table',
       },
       myValue: ''
     }
   }
 }
 </script>

这样一个最基本的tinyMCE富文本就可以使用啦

语言包

tinyMCE默认是英文的语言包，需要使用其他语言可以去官方下载语言包

下载好后需要将下载好的文件放在public文件夹下对应的目录内，并在初始化时修改引用地址

插件的使用

官方插件

tinyMCE内集成了非常多的插件，使用时直接引入,并在初始化时加入即可

import 'tinymce/plugins/advlist'

第三方插件

下载好第三方插件后需要将下载好的文件放在public文件夹下对应的目录内，并在初始化时引入即可

import '@public/tinymce/plugins/lineheight/plugin'

附：插件中文文档

自定义图片上传

第一步：启用图片插件

引入image插件。并在plugins参数中把image加进去。

第二部：初始化时使用images_upload_handler函数

 init: {
         images_upload_handler: (blobInfo, success) => {
            let formData = new FormData()
            formData.append('file', blobInfo.blob());
            uploadAction(window._CONFIG['domianURL']+"/sys/oss/file/upload", formData).then((res) => {
              if (res.success) {
                  const img = res.result
                  success(img)
              }
            })
          }
       }

粘贴过滤

第一步：启用粘贴插件

引入paste插件。并在plugins参数中把paste加进去。

第二部：初始化时使用paste_preprocess函数

 init: {
        paste_preprocess: function(plugin, args){
            if (args.content.indexOf('src="file:') > -1) {  
              args.content = args.content.replace(/<img src="file.*?(?:>|\/>)/gi, '')
            }
          }
       }

paste_preprocess函数传入两个参数：plugin与args，plugin作用未知，args.content是粘贴的内容，主要对args.content进行修改，修改后该函数无需返回值，也就相当于在插入粘贴内容前先执行了该函数。

多个编辑器的使用

只需要循环遍历该封装好的组件即可

在使用多个编辑器的时候，如果想要对某一个富文本进行操作，可以使用下面的方法

tinymce.editors[this.index].insertContent(`<span></span>`)

tinymce是当前页存在的实例数组，index是你想要操作的富文本索引 附:tinymce操作Api，包括如何设置tinymce的内容，获取tinymce的内容，获取tinymce的光标，生成快捷键等

最后

以上仅是我在使用TinyMCE时遇到的一些问题，作为一个总结分享给大家，希望大家指教！

附：tinymce中文文档 tinymce官方文档