即使看了很多文档,实践起来还是会存在很多坑的,捯饬了一下午,终于可以了,记录一下
本案例是采用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 | 插入连接 |
至此,一个简单的富文本算是成型了,但是还有一些其他功能还没开始研究,未完待续。。。。