vue2.0中引入wangEditor2 步骤与坑

1. 安装：官方给出了如下安装方式
   

   点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版
   使用git下载： git clone https://github.com/wangfupeng1988/wangEditor.git
   使用npm安装: npm install wangeditor （注意 wangeditor 全部是小写字母）
   使用bower下载：bower install wangEditor （前提保证电脑已安装了bower）

   在vue2.0项目中直接 npm install wangeditor --save
2. 在页面中放入
   

   <div id="editor"></div>

   然后
   

   import WangEditor from 'wangeditor'

   let that = this
   this.editor = new WangEditor('#WangEditor')  //这个地方传入div元素的id 需要加#号
           // 配置 onchange 事件
   this.editor.change = function () {          // 这里是change 不是官方文档中的 onchange
       // 编辑区域内容变化时，实时打印出当前内容
     console.log(this.txt.html())
   }
   this.editor.create()     // 生成编辑器
   this.editor.txt.html('<p>输入内容...</p>')   //注意：这个地方是txt  不是官方文档中的$txt

3. 在开发中碰到过这么个问题，就是在用v-if动态显示隐藏页面元素时，页面会进行重绘，目标元素div依然存在于dom树中，但是wanEditor实例需要重新生成，且需要在this.$nextTick方法中调用
   

   this.editor = new WangEditor('#WangEditor')

   方可生效
4. wangEditor的输入控制栏与输入区域默认的z-index为100001 10000，当富文本编辑框上方有下拉菜单时，选择框会被覆盖。解决办法
   

   .w-e-menu{
     z-index: 2 !important;
   }
     .w-e-text-container{
       z-index: 1 !important;
     }

   注：w-e-menu的z-index必须比container的大，不然选择菜单栏选项时，会选不上