富文本编辑器学习笔记

后台管理中需要用到富文本编辑器，参考iview后台学习了一下wangeditor，直接记录在vue项目中的写法，单页面写法其文档里有。

1、首先需要一个有id的div盒子好放编辑器----<div id="editor"></div>

2、在页面挂载时创建Editor对象

mounted () {
this.editor = new Editor('#editor');//即创建了编辑器
this.editor.customConfig.menu=[
'head',
'bold'
];//即菜单栏只显示标题字号的选择和加粗项
this.editor.create();//激活，即页面中显示出了编辑器
}

3、在编辑器对象上可以进行的配置，如菜单显示哪些项、菜单栏和输入栏是否分离、获取输入栏的内容、设置编辑器的宽高等；

① this.editor.customConfig.menu=[] --- 菜单显示哪些配置项，如head、bold；

② this.editor = new Editor('#editor1','#editor2') --- 想让菜单栏和输入栏分离，则要向new Editor传入两个参数，分别代表了菜单栏、输入栏；

③ this.editor.customConfig.onchange = function (html) {} --- 当输入栏内容改变时就获取的输入栏（即参数html）的内容；获取内容还有两个方法 --- this.editor.txt.text()、this.editor.txt.html()，只能获取标签、文本，而不能获取样式。

4、对粘贴的文本进行过滤

① this.editor.customConfig.pasteFilterStyle = false --- 是否过滤掉粘贴的文本的样式，为false即关闭了过滤会显示出样式；

② this.editor.customConfig.pastrIgnoreImg = true --- 不粘贴图片；

③ this.editor.customConfig.pasteTextHandle = function (content) { return } --- 参数是粘贴过来的文本，然后返回自定义后的内容；

④ this.editor.customConfig.linkImgCallback = function(url) {} --- 插入网络图片时获取图片的url地址；

⑤ this.editor.customConfig.linkCheck = function (text,link){return true} --- 链接校验，返回true表示校验成功；

⑥ this.editor.customConfig.linkImgCheck = function (src){return true} --- 图片校验，返回true表示校验成功。

5、事件

除了上述的onchange事件，还有onfocus、onblur事件。

6、菜单栏里项的配置

① this.editor.customConfig.colors = [ '#000','#fff'] --- 编辑器颜色选择里的颜色选项，此时只有黑白两种颜色可供选择；

② this.editor.customConfig.fontNames = [ '宋体','微软雅黑'] --- 编辑器字体选择里的字体选项，此时只有宋体、微软雅黑两种字体可供选择（这个字体改变的是样式里的font-family）。

7、上传图片的两种方式（二选一即可）

① this.editor.customConfig.uploadImgShowBase64 = true --- 保存成base64格式；

② this.editor.customConfig.uploadImgServer = '/xxx' --- /xxx是上传图片的服务器端接口；

this.editor.customConfig.showLinkImg = false--- 隐藏‘网络图片’tab；

最后注意，以上所有的配置需要写在this.editor.create()的前面才可以。

欢迎大家互相沟通学习，共同进步。

（~ ^_^ ~）

最后

以上就是虚心小馒头为你收集整理的富文本编辑器学习笔记的全部内容，希望文章能够帮你解决富文本编辑器学习笔记所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。