tinyMCE-vue使用遇到的问题

导入tinyMCE会有许多报错，但是在博客搜索不到这些报错的解决方法，都是一些引入问题的报错，但是搜到的都是一些前后端交互的问题。

准备材料

npm i tinymce -S

npm i @tinymce/tinymce-vue@3.0.1 -S

ps:我用的是vue2.x，所以这里控制了 tinymce-vue 的版本。（以下皆是vue2的一些方法，仅供参考）

引入问题

当我们安装完tinymce的两个文件后，我们的导入算是结束了，但是想要使用，我们还需要在node_modules 中寻找 tinymce 目录下的 skins，复制后放在 public 下。

我这里在 public 创建了 tinymce 目录，便于分辨文件。langs 文件是 官网下载 的翻译包。

引入文件出现问题

当我们只下引入下面文件的时候，就可能出现问题。

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

逐条分析，出现 silver 的 bug，可以引入

import 'tinymce/themes/silver/theme'

出现 models/dom/model 的 bug，可以引入

import 'tinymce/models/dom/model'

出现 icons/default/icons 的 bug，可以引入

import 'tinymce/icons/default/icons'

简单的理解就是缺啥文件都去引入相关的文件，去tinymce中寻找相关文件，手动引入文件来解决问题。

Refused to apply style from ‘http://localhost:8080/js/skins/content/default/content.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

如果出现这个问题，就需要在初始化的设置中添加

content_css: '/tinymce/skins/content/document/content.css'

完整的代码

<template>
  <div>
    <editor :init="init"></editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/models/dom/model'
export default {
    name:'tinymceEditor',
    components:{Editor},
    data(){
        return{
            init:{
              skin_url: '/tinymce/skins/ui/oxide-dark',
              language_url: '/tinymce/langs/zh-Hans.js',
              language:'zh-Hans',
              content_css: '/tinymce/skins/content/document/content.css',
            }
        }
    },
    mounted(){
        tinymce.init({})
    }
}
</script>

<style lang="scss" scoped>

</style>