Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等

先放张效果图

第一步：安装依赖 npm install [email protected]

第二步：在项目中的public文件夹中新建tinymce文件夹（因为我的项目是脚手架创建的，所以公共文件夹是public）；在node_modules中找到skins文件夹复制到tinymce文件夹中

第三步：因为tinymce是英文版本的，所以要下载汉化包中文js，放到上面的tinymce文件夹中

下载网址：https://www.tiny.cloud/get-tiny/language-packages/

翻到最底部，找到中文语言点击Download按钮，放到和上一步的skins文件夹同级目录的tinymce文件夹中

第四步：封装tinymce组件，这里就直接上代码了;

Tip: 1.

第五步：在页面中调用上面封装好的组件

Tip: 1.中使用TinymceEditor要注意延迟显示，延迟在弹窗显示之后再显示富文本编辑器，因为弹窗元素未加载出来时，编辑器找不到父级元素就无法正常显示

2.赋值和清除富文本编辑器的内容只要针对绑定的值进行清空和赋值操作就行