Vue 3.x 集成tinymce 5.x富文本编辑器

前言

以前用过百度编辑器，一把辛酸泪，各种坑+长期无人维护。于是新项目用上了号称世界第一的tinymce. 去官网溜达一圈后，果断放弃，一是访问速度慢，二是文档不友好。参考了很多博主的文章，总算是集成成功。

步骤

• 安装tinymce

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

• 引入tinymce

import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'

• 拷贝tinymce/skins目录到public/tinymce下
• 引入组件，language_url指向中文包地址，skin_url指向皮肤地址，均在public/tinymce/skin下。init_instance_callback为初始化完成事件。

data() {
	return {
		editorProps: {
          width: 720,
          height: 500,
          language_url: '/tinymce/zh_CN.js',
          language: 'zh_CN',
          skin_url: '/tinymce/skins/ui/oxide',
          menubar: false,
          statusbar: false,
          convert_urls: false,
          toolbar:
            'undo redo | formatselect | bold italic backcolor | \
            alignleft aligncenter alignright alignjustify | \
            bullist numlist outdent indent | removeformat',
          init_instance_callback: (editor) => {
          }
        }
	}
},
components: {
	Editor
},
mounted () {
  tinymce.init({})
}

• 使用组件

<Editor id="tinymce" v-model="content" :init="editorProps">Editor>

如何自定义插件？

项目中有上传图片的需求，所以我自定义了一个图片上传插件，在public/tinymce/plugins目录下，创建imageSelector文件夹，然后新建plugin.js文件

• 创建自定义插件

import tinymce from 'tinymce/tinymce'

tinymce.PluginManager.add('imageSelector', function (editor) {
  editor.ui.registry.addButton('imageSelector', {
    icon: 'image',
    tooltip: '插入图片',
    onAction: function () {
      // onAction意思是，点击上传图片按钮触发的事件，所以这里可以自由发挥。
    }
  })
})

• 引入自定义插件，需要在toolbar和plugins中引入自定义插件

import '../../public/tinymce/plugins/imageSelector/plugin'

editorProps: {
          toolbar:
            'undo redo | formatselect | bold italic backcolor | \
            alignleft aligncenter alignright alignjustify | \
            bullist numlist outdent indent | removeformat | imageSelector',
          plugins: 'imageSelector',
}

IE浏览器编辑器加载慢的问题

经排查，加载慢的原因是，虽然我定义了一个skin_url，但是tinymce还为我们提供了默认的skin_url，而且这个skin_url是个绝对路径，用baseUrl去拼接。如果该路径无法访问，那么就有可能导致加载慢的问题。详情可debug看源码.
这里，我的解决方案是手动指定baseUrl

window.tinymce.baseURL = '/tinymce'

Uncaught SyntaxError: Unexpected token <问题

这个问题的原因是资源文件找不到，解决方案和上一个问题是一样的。

总结

前端真难学。