VUE2下版本的项目加入富文本框实现

即使看了很多文档，实践起来还是会存在很多坑的，捯饬了一下午，终于可以了，记录一下

本案例是采用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/tinymce-vue@3.0.1

至此，回归正常

二、开始配置

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	粘贴为纯文本.
print	print	打印.
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	粘贴纯文本
print	print	打印
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	插入连接

至此，一个简单的富文本算是成型了，但是还有一些其他功能还没开始研究，未完待续。。。。