466      阿里云  技术社区[云栖]

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 ></div>

   然后
   

   import WangEditor from 'wangeditor'

   let that = this
   this.editor = new WangEditor('#WangEditor')  //
           // 配置 onchange 事件
   this.editor.change = function () {          // 
       // 编辑区域内容变化时，实时打印出当前内容
     console.log(this.txt.html())
   }
   this.editor.create()     // 生成编辑器
   this.editor.txt.html('<p>输入内容...</p>')   //

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

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

   方可生效

最后更新：2017-11-07 11:03:46

  上一篇：  【高通倾向拒绝博通收购】博通拟以1300亿美元收购高通，IT史最大收购案能否成功（专家评论）

  下一篇：  寒武纪3款AI处理器齐发，陈天石3年小目标：占领10亿智能AI终端；占领中国AI云端高性能芯片1/3