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相关补充

| toolbar配置 | 功能 | 所需插件 | | :------------------: | :---------------: | :----------------------------------------------------------: | | restoredraft | 恢复上次的草稿 | 无需引入插件 | | undo | 撤销 | 无需引入插件 | | redo | 恢复 | 无需引入插件 | | fontselect | 字体选择 | 无需引入插件 | | styleselect | 格式选择 | 无需引入插件 | | fontsizeselect | 字号选择 | 无需引入插件 | | cut | 剪切 | 无需引入插件 | | copy | 复制 | 无需引入插件 | | selectall | 全选 | 无需引入插件 | | bold | 粗体 | 无需引入插件 | | italic | 斜体 | 无需引入插件 | | underline | 下划线 | 无需引入插件 | | strikethrough | 删除线 | 无需引入插件 | | subscript | 下标 | 无需引入插件 | | superscript | 上标 | 无需引入插件 | | removeformat | 清除格式 | 无需引入插件 | | forecolor | 文字颜色 | 无需引入插件 | | backcolor | 背景颜色 | 无需引入插件 | | align | 对齐方式 | 无需引入插件 | | outdent | 增加缩进 | 无需引入插件 | | indent | 减少缩进 | 无需引入插件 | | paste | 粘贴 | paste | | ltr | 文字方向从左向右 | directionality | | rtl | 文字方向从右向左 | directionality | | anchor | 锚点 | anchor | | lineheight | 锚点 | lineheight | | bullist | 符号列表 | advlist,lists(advlist依赖于lists) | | numlist | 数字列表 | advlist,lists(advlist依赖于lists) | | insertdatetime | 插入时间/日期 | insertdatetime | | table | 表格 | table | | tabledelete | 删除表格 | table | | tableprops | 表格属性 | table | | tablerowprops | 行属性 | table | | tablecellprops | 单元格属性 | table | | tableinsertrowbefore | 在上方插入 | table | | tableinsertrowafter | 在下方插入 | table | | tabledeleterow | 删除行 | table | | tableinsertcolbefore | 在左侧插入 | table | | tableinsertcolafter | 在右侧插入 | table | | tabledeletecol | 删除列 | table | | hr | 水平分割线 | hr | | nonbreaking | 插入不间断空格 | nonbreaking | | pagebreak | 分页符 | pagebreak | | template | 内容模板 | template | | charmap | 特殊字符 | charmap | | emoticons | 表情插件 | emoticons | | image | 插入编辑图片 | image | | quickimage | 快捷插入图片 | image | | media | 插入/编辑媒体资源 | media | | link | 超链接 | link | | toc | 目录生成器 | toc | | code | 编辑源码 | code | | quickbars | 快速工具栏 | quickbars | | codesample | 代码示例 | codesample | | fullpage | 文档属性 | fullpage | | print | 打印 | print | | searchreplace | 查找替换 | searchreplace | | preview | 预览 | preview | | fullscreen | 全屏 | fullscreen | | wordcount | 字数统计 | wordcount | | visualblocks | 显示区块边框 | visualblocks | | visualchars | 显示不可见字符 | visualchars | | help | 帮助 | 无需引入插件 |

tinymce插件相关补充及说明

来源于Tinymce中文文档

| plugin | 功能 | 备注 | | :----------------------------------------------------------: | :--------------: | :----------------------------------------------------------: | | advlist | 高级列表插件 | 官方地址 | | anchor | 锚点插件 | 官方地址 | | autolink | 自动链接插件 | 官方地址 | | autoresize | 编辑器大小自适应 | 官方地址 | | autosave | 自动存稿 | 无需引入,已集成官方地址 | | bbcode | -- | 官方地址 | | charmap | 特殊字符插件 | 官方地址 | | code | 编辑源码 | 官方地址 | | codesample | 代码示例插件 | 官方地址 | | directionality | 文字方向 | 官方地址 | | emoticons | 表情插件 | 官方地址 | | fullpage | 文档属性 | 官方地址 | | fullscreen | 全屏 | 官方地址 | | help | 帮助 | 无需引入,已集成官方地址 | | hr | 水平分割线 | 官方地址 | | image | 插入编辑图片 | 官方地址 | | importcss | 引入css | 官方地址 | | media | 插入编辑媒体 | 官方地址 | | insertdatetime | 插入当前日期时间 | 官方地址 | | legacyoutput | 输出HTML4 | 官方地址 | | link | 超链接 | 官方地址 | | lists | 列表插件 | 官方地址 | | nonbreaking | 插入不间断空格 | 官方地址 | | noneditable | 不可编辑元素 | 官方地址 | | pagebreak | 插入分页符 | 官方地址 | | paste | 粘贴插件 | 官方地址 | | preview | 预览 | 官方地址 | | print | 打印 | 官方地址 | | quickbars | 快速工具栏 | 官方地址 | | save | 保存 | 官方地址 | | searchreplace | 查找替换 | 官方地址 | | spellchecker | 拼写检查 | 官方地址 | | tabfocus | tab切入切出 | 官方地址 | | table | 表格插件 | 官方地址 | | template | 内容模板 | 官方地址 | | textcolor | 文字颜色 | 无需引入,已集成官方地址 | | textpattern | 快速排版 | 无需引入,已集成官方地址 | | toc | 目录生成器 | 官方地址 | | visualblocks | 显示块元素范围 | 官方地址 | | visualchars | 显示不可见字符 | 官方地址 | | wordcount | 字数统计 | 官方地址 |