1、tinymce 官方为 vue 项目提供了一个组件 tinymce-vue
2、npm安装vue组件,同事安装源插件
npm i @tinymce/tinymce-vue -S、npm i tinymce -S
3、安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下,如果是使用 vue-cli 3.x 构建的项目,就放到 public 目录下
4、tinymce 默认是英文界面,所以如果需要汉化还需要下载一个中文语言包,然后将它放到 static 目录下
5、在页面中引入以下文件:
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
6、tinymce-vue 是一个组件,需要在 components 中注册后直接使用
<editor id="tinymce" v-model="form.content" :init="init"></editor>
7、在data中声明init变量,语言包、skin的路径就引用之前的存放路径,注意skin必须引用,否则不显示。
init: {
language_url: '/static/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/s