VUE安装tinymce-editor

安装步骤网上也很多，这里就不详细说明，这是我采用的一个方法在 Vue 项目中引入 tinymce 富文本编辑器 ，这个仅适用于 Tinymce 4.x，我的是5.x,稍微有点改动，如下：

三个容易错误的地方：

1.经常会出现Unexpected token '< 错误，这是因为你的引入路径不对，

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// import 'tinymce/themes/modern/theme' // 引入主题
import 'tinymce/themes/silver'

提醒：如果找不到  import 'tinymce/themes/modern/theme' 

可以替换成 import 'tinymce/themes/silver' 

2. 初始化

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下，如果是使用 vue-cli 3.x 构建的项目，就放到 public 目录下，文中所有 static 目录相关都这样处理，注意路径！！！注意路径！！！注意路径！！！

 editorInit: {
        language_url: '/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        branding: false,//是否禁用“Powered by TinyMCE”
        height: 300,  // 编辑器的高度
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu fullscreen',
        toolbar:
          ['bold italic underline strikethrough | fontsizeselect | fontselect| forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo|link image |code table | removeformat fullscreen'],
        // 上传本地图片的方法 axios上传方式
        images_upload_handler: function (blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob(), blobInfo.filename())
          uploadFile(formData).then(res => {
            success(res.data.url)
          })
        },

记得挂载

 mounted () {
    tinymce.init({})
 }

3.还有一个坑就是not found,啥子???????看报错是 Unexpected token '< ，我知道是路径错误了，但是反复查找不到原因，看下面箭头的地方我终于有方向是icons的路径错误了，百度找了一番找到了解决方法

解决办法： 导入 import 'tinymce/icons/default/icons' 这个就解决了