|
一、引入tinymce-vue
官网 https://www.tiny.cloud/docs/integrations/vue/#tinymcevuejsintegrationquickstartguide
注意
vue2.x 使用的是tinymce-vue4版本以下的
npm install --save "@tinymce/tinymce-vue@^3"
vue4.x 使用的是tinymce-vue4版本以上的
npm install --save "@tinymce/tinymce-vue"
二、通过包管理方式下载 tinymce
npm install tinymce -S
三、配置中文语言
到官网下载中文语言包 zh_CN.js
1661307100185.png
四、注意事项
需要将 node_modules下的tinymce/skins文件夹复制到项目的public/tinymce文件夹下
2、需要将 node_modules下的tinymce/icons文件夹复制到项目的public/tinymce文件夹下
3、将下载后的汉化语言包放到public/tinymce
五、引入tinymce-vue，tinymce
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
// 引入你需要的插件
// import 'tinymce/plugins/paste'
// import 'tinymce/plugins/link'
export default {
components: { Editor },
data () {
return {
init: {
base_url: '/tinymce',
language_url: '/tinymce/langs/zh-Hans.js', // 语言包的路径
language: 'zh-Hans', // 语言
skin_url: '/tinymce/skins/ui/oxide', // skin路径
height: 400, // 编辑器高度
branding: false // 是否禁用“Powered by TinyMCE”
}
}
},
|