tinymce富文本使用说明

通过npm 下载tinymce

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

创建组件

下载tinymce完成后在node_modules 中找到 tinymce/skins目录，拷贝到自己的业务代码里，
这里是放在src/components下，index.vue是初始化tinymce的组件文件

image.png

下载中文语言包

tinymce提供了很多的语言包，这里我们下载中文语言包，把zh_CN.js 放入tinymce文件夹里

image.png

<template>
  <div class="tinymce">
    <editor v-model="editObj.content"
            :init="init"></editor>
    <el-upload action=""
               :http-request="uploadFile"
               style="display: none">
      <el-button v-loading.fullscreen="loading">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
// 引入插件必需的文件
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import './tinymce/skins/ui/oxide/skin.min.css'
import './tinymce/icons/default/icons'
import lang from './tinymce/zh_CN'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullscreen'
// 这个是业务代码里的接口，upload上传图片，uploadUrl 获取图片路径
import { upload, uploadUrl } from '@/api/fsl'
export default {
  name: 'tinymce',
  props: {
    editObj: {
      type: Object,
      default: {}
    },
  },
  data () {
    return {
      //tinymceHtml: '请输入内容',
      init: {
        language_url: lang,
        language: 'zh_CN',
        height: 500,
        // emoticons_database_url: '/tinymce/emojis.js',
        plugins: 'link lists image code table preview fullscreen',
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | undo redo | image uploadfile | removeformat link unlink preview code',
        branding: false,
        setup: (editor) => {
          editor.ui.registry.addButton('uploadfile', {
            tooltip: '上传附件',
            icon: 'uploadfile',
            onAction: () => {
              document.querySelector('.el-upload .el-button').click()
            }
          })
        },
        images_upload_handler: (blobInfo, success, failure) => {        // images_upload_url或者images_upload_handler必须出现一个才可以上传本地文件
          var fd = new FormData()
          fd.append('file', blobInfo.blob())
          upload(fd).then(result => {
            success(uploadUrl(result.fid))
          }).catch(result => {
            failure('上传失败')
          })
        },
      },
      loading: false,
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
    uploadFile (obj) {
      this.loading = true
      let fd = new FormData()
      fd.append('file', obj.file)
      upload(fd).then(result => {
        this.loading = false
        tinymce.execCommand('mceInsertContent', false, `<a class="a-file" href="${uploadUrl(result.fid)}">${obj.file.name}</a>`)
      })
    }
  },
  components: { Editor },
}
</script>

<style lang="scss">
</style>

踩得坑

1.tinymce 初始化失败

这个bug发生的前提是用的iView开发的项目
问题出在iview的Modal上，两种解决方案：
1.换成element-ui的Modal就好了；
2.将初始化从组件中移出去，不在Tinymce的mounted中调用，而是在外部组件（包含有Modal的组件）调用
分析思考：
问题的出现是在tab关闭重新再打开时，Tinymce初始化失败，init方法未返回Promise对象，then方法无法调用，富文本框无实际内容；
与此同时，我们发现每一次重新打开Tab都会执行Tinymce的mounted（里面调用init），所以从vue的生命周期上来说这是完全正确的；
在控制台，我们看到页面的dom结构时，发现Modal与Vue的根结点app是平级的，也就是说Modal中的内容，不受Vue管理；
基于此，我们将初始化的调用执行向外提，放到Modal所在的Vue组件中，让初始化的过程接受Vue的管理，如此初始化过程便正常了。

2.编辑器在弹窗里，打开编辑器的工具窗口没有反应

原因是，工具窗口的z-index太低，被窗口覆盖了

image.png

解决方法：
在引用该编辑器组件的文件里设置下css就可以啦

.tox.tox-silver-sink.tox-tinymce-aux {
    z-index: 2200;
}

3.tinymce 报错 TypeError: Object(...) is not a function

原因：版本过高
解决方法：适用版本

"@tinymce/tinymce-vue": "^3.2.2",
"tinymce": "^5.4.1",