tinymce-vue-h v5.10.7

tinymce-vue-h

github地址

demo github地址

tinymce-vue-h使用

基于tinymce封装的vue2.x富文本编辑器

npm install tinymce-vue-h -S

import TinymceVueH from 'tinymce-vue-h'
// 将node_modules/tinymce/skins文件夹和node_modules/tinymce/themes文件夹拷贝放至public/tinymce文件夹下,如需中文包,下载后放至public/tinymce/langs目录下, 然后按如下配置即可

<tinymce-vue-h :init="{tinymceInit}" v-model="value"></tinymce-vue-h>

// 将node_modules/tinymce/skins文件夹和node_modules/tinymce/themes文件夹拷贝放至public/tinymce文件夹下,如需中文包,下载后放至public/tinymce/langs目录下, 然后按如下配置即可
tinymceInit = {
  theme: 'silver', // 必须参数, 否则富文本编辑器无法显示
  skin_url: '/tinymce/skins/ui/oxide', // 必须参数, 否则富文本编辑器无法显示
  language_url: '/tinymce/langs/zh_CN.js', // 如需中文,则引入
  language: 'zh_CN', // 如需中文,则引入
  content_css: `/tinymce/skins/content/default` // 必须参数
}
以上参数为必须参数

中文及主题包相关存放目录参考 中文包

在`public`目录下新建文件夹tinymce\langs\zh_CN.js, 引入中文翻译

默认配置如下图

参考于

Tinymce中文文档

Tinymce官方文档

Tinymce github地址

tinymce版本为5.30+

tinymce-vue-h相关配置说明请参考github地址

toolbar相关补充

tinymce插件相关补充及说明

来源于Tinymce中文文档