tinymce-vue笔记
项目使用vue-cli 3.x版本,tinymce5
1. 安装
npm install @tinymce/tinymce-vue
2. 引用
出现的问题和摸索出的解决方案(参考了https://www.cnblogs.com/wisewrong/p/8985471.html,虽然文章里使用的是tinymce4,但是也有很大帮助)
- 报第一个错,发现只安装tinymce-vue不可以,还需安装tinymce,执行
npm install tinymce
- 按示例初始化发现编辑器不显示,报“
theme.js:1 Uncaught SyntaxError: Unexpected token <
”这个错,需要手动引入tinymce主题,在init({})方法里加theme: 'silver',
没用。
import 'tinymce/themes/silver/theme'
- 不报错了但是编辑器还是不显示,继续研究,发现还需要定义skin_url,在init({})里加
skin: "oxide"
没用。先在public目录下新建一个文件夹命名为tinymce,然后在node_modules里找到tinymce的skin包,复制到public/tinymce里,然后创建tinymce时添加一行代码
skin_url: '/tinymce/skins/ui/oxide',
3. 定制
- 将语言改为中文
步骤:
- 在官网下载语言包https://www.tiny.cloud/get-tiny/language-packages/
- 把下载的语言包放到之前新建的tinymce文件夹里
- 初始化时添加以下代码
language_url: `/tinymce/langs/zh_CN.js`,
language: 'zh_CN',
- 在tinymce5工具栏添加自定义功能按钮
const that = this
this.tinymceInit = {
toolbar: 'imageUpload',
setup: (editor) => {
editor.ui.registry.addButton('imageUpload', {
tooltip: '插入图片',
icon: 'image',
onAction: () => {
}
})
}
}