富文本编辑器学习笔记

后台管理中需要用到富文本编辑器，参考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()，只能获