vue3.x中使用tinymce富文本（支持IE10+）

1.安装

npm install tinymce -S npm --save @tinymce/tinymce-vue

2.在public下新建tinymce文件夹，将node_moudles里面tinymce里的skins文件复制到该文件下（我这里是把node_moudles下的整个tinymce文件拷贝到了public下

tinymce1.png

3.下载中文包
链接：https://www.tiny.cloud/get-tiny/language-packages/
把下载的语言包放到之前新建的tinymce文件夹里

4.新建一个tinymec组件，在组件中引入

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'

5.在组件中引入自己需要的工具栏

import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/code'
import 'tinymce/plugins/paste'

自定义按钮

init: {
       ...
        setup: function (editor) {  /*自定义上传图片按钮*/
          editor.ui.registry.addButton('uploadimg', {
            icon: "image",
            tooltip: "上传图片",
            onAction: function (_) {
              document.querySelector("#upload_img input").click();
            }
          });
        },
      },

props

props: {
    //传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'lists table wordcount code image'
    },
    toolbar1: {
      type: [String, Array],
      default: 'undo redo | code | fontsizeselect | fontselect | styleselect | bold italic underline | bullist numlist outdent indent | uploadimg table'
    },
    toolbar2: {
      type: [String, Array],
      default: 'alignleft aligncenter alignright alignjustify | forecolor backcolor | removeformat'
    },
  },

在data里初始化配置

init: {
        language_url: '/tinymce/langs/zh_CN.js', /*vue3.x 的路径/tinymce/langs/zh_CN.js ，vue2.x的路径/static/tinymce/langs/zh_CN.js*/
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 600,
        width:810,
        plugins: this.plugins,
        toolbar1: this.toolbar1,
        toolbar2: this.toolbar2,
        branding: false,
        menubar: false,
        statusbar: false, // 隐藏编辑器底部的状态栏
        // image_description: false,
        // image_dimensions: false,
        // image_title: false,
        // image_uploadtab: false,本地上传图片
        paste_data_images: true,/*是否允许粘贴图片*/
        setup: function (editor) {  /*自定义上传图片按钮*/
          editor.ui.registry.addButton('uploadimg', {
            icon: "image",
            tooltip: "上传图片",
            onAction: function (_) {
              document.querySelector("#upload_img input").click();
            }
          });
        },
        //如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        /*上传到oss*/
        images_upload_handler: (blobInfo, success, failure) => { /*没有自定义上传按钮，用他本身的时候用这里的上传*/
          let time = Date.parse(new Date())
          let that = this
          if(blobInfo.blob().size / 1024 / 1024 > 1 ){
            failure('上传图片不能超过1M!');
          }
          if(blobInfo.blob().type !== "image/jpeg"){
            failure('上传图片只能是 JPG 格式!');
          }
          if(that.imgNum >= that.totalImg){
            failure('图片不能超过30张!')
          }
          let img = new Image();
          img.src = "data:"+blobInfo.blob().type+";base64,"+blobInfo.base64();
          img.onload = function(){
            // console.log(img.width, img.height);
            if (img.width < 500  || img.height < 500) failure('上传图片分辨率不能低于500*500!');
            that.imgNum +=1
            uploadImg().then(res => {
              const form = new FormData()
              form.append('policy', _get(res, 'data.policy'))
              form.append('OSSAccessKeyId', _get(res, 'data.accessid'))
              form.append('signature', _get(res, 'data.signature'))
              form.append('key', `${_get(res, 'data.dir')}${_get(res, 'data.key')}${'_'}${time}${'.jpg'}`)
              form.append('success_action_status', 200)
              form.append('file', blobInfo.blob(), blobInfo.filename())
              that.updateImg = (process.env.OSS_URL + '/' + `${_get(res, 'data.dir')}${_get(res, 'data.key')}${'_'}${time}${'.jpg'}`)
              that.$http.post(process.env.OSS_URL, form).then(resp => {
                success(that.updateImg)
              }).catch(err => {
                failure('网络错误，请稍后再试！')
                console.log(err);
              })
            }).catch(err => {
              failure('网络错误，请稍后再试！')
              console.log(err);
            })
          }
          /*const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
          console.log(success);*/
        }
      },

组件全部代码（结合element-ui）上传图片到阿里云

在页面中使用

import TinymceEditor from '@/views/tinymce.vue'
components: {TinymceEditor},

{{ msg }}

效果图

tinymce2.png

如果报这种错，说明路径不对

tinymce3.png