tinyMCE-vue使用遇到的问题
tinymce 使用 的小问题
·
导入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>
更多推荐
已为社区贡献1条内容
所有评论(0)