即使看了很多文档，实践起来还是会存在很多坑的，捯饬了一下午，终于可以了，记录一下
本案例是采用tinymce这个插件，中文官网：http://tinymce.ax-z.cn/，直接进入 "三方集成专区" 查看
一、首先下载资源：
npm install tinymce -S
但是只使用这个命令，虽然官网说的是一次将所有的依赖的包全下载下来，但是我npm run dev时，就会报出下面这个错：翻译为@tinymce/tinymce-vue/这个文件下的js找不到
那就是缺少这个依赖的下载，于是再下载一下
npm install @tinymce/tinymce-vue
这样下载安装的话，webpack打包更新是不会报错了，但是在浏览器就会报错，如下：
是因为tinymce/tinymce-vue这个包的版本不对，太高了，故需再执行
npm install @tinymce/[email protected]
至此，回归正常
二、开始配置
1、下载后，将node_module文件下的tinymce文件，拷贝一份到vue项目的与src同级别的static目录下
因为这个插件是英文的，故需下载个中文包转换一下：https://www.tiny.cloud/get-tiny/language-packages/ 下载后需再将其再放入static目录下，后面用于init初始化参数
在vue组件中引入vue带的tinymce组件 ，只需引这一个即可，不需多引 ： import Editor from "@tinymce/tinymce-vue";
2、然后在components进行注册声明 ：components: { "tinymce": Editor } 可映射可不映射，看自己
然后在组件上使用此组件：
<tinymce :init="init" v-model="form.content"></tinymce>
v-model绑定的是富文本的初始文案
init属性就是初始化富文本的一些参数，一般配置如下：
init: {
language_url: "/static/zh_CN.js", //路径就是我们下载的中文语言包路径
language: "zh_CN", //声明富文本的语言类型
height: 430,
menubar:true,//是否显示上面菜单
plugins:"link lists image code table colorpicker textcolor wordcount contextmenu",
toolbar:"bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat", //放置头部的一些配置
branding: false, //控制是否内联
images_upload_handler:(blobInfo, success,failure)=> {
success('data:image/jpeg;base64,' + blobInfo.base64())
}其中toolbar里面的配置太多了，这是我搜集了众多资源，不知道是不是全部
三、菜单可选功能
| 配置项 | 所属插件 | 描述 |
|---|---|---|
| newdocument | 核心 | 创建一个新文档 |
| undo | 核心 | 撤回 |
| redo | 核心 | 恢复 |
| visualaid | 核心 | 网格线 |
| cut | 核心 | 剪切 |
| copy | 核心 | 复制 |
| paste | 核心 | 粘贴 |
| selectall | 核心 | 全选 |
| bold | 核心 | 加粗 |
| italic | 核心 | 斜体 |
| underline | 核心 | 下划线 |
| strikethrough | 核心 | 删除线 |
| subscript | 核心 | 下标 |
| superscript | 核心 | 上标 |
| removeformat | 核心 | 清除格式 |
| codeformat | 核心 | 内联形式插入代码. |
| blockformats | 核心 | 块形式插入代码. |
| align | 核心 | 更改对齐方式. |
| formats | 核心 | 所有可用格式. |
| link | link | 添加一个连接. |
| openlink | link | 添加一个在新标签页中打开的连接. |
| image | image | 添加图片. |
| charmap | charmap | 开启字符映射表. |
| pastetext | paste | 粘贴为纯文本. |
| 打印. | ||
| preview | preview | 预览 |
| hr | hr | 横线 |
| anchor | anchor | 插入锚点. |
| pagebreak | pagebreak | 分页符 |
| spellchecker | spellchecker | 拼写检查开关. |
| searchreplace | searchreplace | 打开搜索和替换对话框 |
| visualblocks | visualblocks | 隐藏块级区域开关. |
| visualchars | visualchars | 隐藏字符串开关. |
| code | code | 源码预览. |
| fullscreen | fullscreen | 全屏 |
| insertdatetime | insertdatetime | 插入时间. |
| media | media | 插入媒体文件 |
| nonbreaking | nonbreaking | 插入一个nonbreaking |
| inserttable | table | 插入表格 |
| tableprops | table | 配置并插入表格. |
| deletetable | table | 删除表格. |
| cell | table | 表格单元配置 |
| row | table | 表格行配置 |
| column | table | 表格列配置 |
| restoredraft | autosave | 恢复到上次自动保存的数据 |
| fullpage | fullpage | 查看完整的文档属性 |
| toc | toc | 插入目录 |
| help | help | 帮助菜单 |
工具栏可选功能
| 配置项 | 所属插件 | 描述 | ||
|---|---|---|---|---|
| newdocument | 核心 | 创建新文档 | ||
| bold | 核心 | 加粗 | ||
| italic | 核心 | 斜体 | ||
| underline | 核心 | 下划线 | ||
| strikethrough | 核心 | 删除线 | ||
| alignleft | 核心 | 居左 | ||
| aligncenter | 核心 | 居中 | ||
| alignright | 核心 | 居右 | ||
| alignjustify | 核心 | 两端对齐 | ||
| alignnone | 核心 | 清除 | ||
| styleselect | 核心 | 格式选择下拉框(缩进、行高) | ||
| formatselect | 核心 | 段落选择下拉框(段落、标题) | ||
| fontselect | 核心 | 字体选择下拉框 | ||
| fontsizeselect | 核心 | 字号选择下拉框 | ||
| cut | 核心 | 剪切 | ||
| copy | 核心 | 复制 | ||
| paste | 核心 | 粘贴 | ||
| outdent | 核心 | 减少缩进 | ||
| indent | 核心 | 增加缩进 | ||
| blockquote | 核心 | 引用 | ||
| undo | 核心 | 撤消 | ||
| redo | 核心 | 恢复 | ||
| removeformat | 核心 | 清除格式 | ||
| subscript | 核心 | 下标 | ||
| superscript | 核心 | 上标 | ||
| visualaid | 核心 | 网格线 | ||
| insert | 核心 | 插入的集合按钮 | ||
| hr | hr | 水平线 | ||
| bullist | lists | 无序列表 | ||
| numlist | lists | 有序列表 | ||
| link | link | 添加和修改链接 | ||
| unlink | link | 去除链接格式 | ||
| openlink | link | 打开选中链接 | ||
| image | image | 添加和修改图片 | ||
| charmap | charmap | 特殊符号 | ||
| pastetext | paste | 粘贴纯文本 | ||
| 打印 | ||||
| preview | preview | 预览 | ||
| anchor | anchor | 作者 | ||
| pagebreak | pagebreak | 分页符 | ||
| spellchecker | spellchecker | 拼写检查 | ||
| searchreplace | searchreplace | 搜索 | ||
| visualblocks | visualblocks | 隐藏块级区域开关 | ||
| visualchars | visualchars | 隐藏字符串开关. | ||
| code | code | 代码 | ||
| help | help | 帮助 | ||
| fullscreen | fullscreen | 全屏 | ||
| insertdatetime | insertdatetime | 插入时间 | ||
| media | media | 插入/编辑媒体文件 | ||
| nonbreaking | nonbreaking | 不间断空格 | ||
| save | save | 保存(ajax) | ||
| cancel | save | 取消保存 | ||
| table | table | 插入/编辑表格 | ||
| tabledelete | table | 删除表格 | ||
| tablecellprops | table | 单元格属性 | ||
| tablemergecells | table | 合并单元格 | ||
| tablesplitcells | table | 拆分单元格 | ||
| tableinsertrowbefore | table | 在当前行之前插入一个新行 | ||
| tableinsertrowafter | table | 在当前行之后插入一个新行 | ||
| tabledeleterow | table | 删除当前行 | ||
| tablerowprops | table | 行属性 | ||
| tablecutrow | table | 剪切选定行 | ||
| tablecopyrow | table | 复制选定行 | ||
| tablepasterowbefore | table | 在当前行之前粘贴行 | ||
| tablepasterowafter | table | 在当前行之后粘贴行 | ||
| tableinsertcolbefore | table | 在当前列之前插入一个列 | ||
| tableinsertcolafter | table | 在当前列之后插入一个列. | ||
| tabledeletecol | table | 删除当前列 | ||
| rotateleft | imagetools | 逆时针旋转当前图像 | ||
| rotateright | imagetools | 顺时针旋转当前图像 | ||
| flipv | imagetools | 垂直翻转当前图像 | ||
| fliph | imagetools | 水平翻转当前图像 | ||
| editimage | imagetools | 打开图像编辑对话框 | ||
| imageoptions | imagetools | 打开图像配置对话框 | ||
| fullpage | fullpage | 完整页面的文档属性 | ||
| ltr | directionality | 设置编写方向从左到右 | ||
| rtl | directionality | 设置编写方向从右到左 | ||
| emoticons | emoticons | 表情 | ||
| template | template | 插入模板 | ||
| forecolor | textcolor | 文本颜色 | ||
| backcolor | textcolor | 背景颜色 | ||
| restoredraft | restoredraft | 恢复到最新的自动保存草稿 | ||
| insertfile | moxiemanager | 引入文件 | ||
| a11ycheck | a11ychecker | 检查访问性 | ||
| toc | toc | 插入目录 | ||
| quickimage | inlite | 插入本地图像 |
||
| quicktable | inlite | 插入2X2的表格 | ||
| quicklink | inlite | 插入连接 |
至此，一个简单的富文本算是成型了，但是还有一些其他功能还没开始研究，未完待续。。。。