vue2.0中引入wangEditor2 步骤与坑

简介: 安装:官方给出了如下安装方式点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版 使用git下载: git clone https://github.
  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的大,不然选择菜单栏选项时,会选不上
相关文章
|
8天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
37 3
|
2天前
|
Web App开发 JavaScript 开发者
Vue工具和生态系统:什么是Vue DevTools?如何使用它?
Vue Devtools是Vue.js官方的浏览器扩展,用于简化应用调试和优化。可在Chrome和Firefox等浏览器上安装,集成到开发者工具中。安装步骤包括下载源码、npm安装、修改manifest.json并加载编译后的扩展。启用后,开发者能查看Vue组件树,检查属性,并在允许的情况下编辑data,提升开发效率。
5 0
|
3天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
3天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
14 0
|
3天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
11 0
|
3天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
7 1
|
3天前
|
JavaScript 定位技术
vue项目开发笔记记录(二)
vue项目开发笔记记录
43 0
|
3天前
|
JSON JavaScript API
vue项目开发笔记记录(一)
vue项目开发笔记记录
48 0
|
3天前
|
JavaScript
Vue-实现点击空白处隐藏某节点
Vue-实现点击空白处隐藏某节点
10 1
|
3天前
|
缓存 JavaScript 前端开发
vue项目实战:实战技巧总结(中)
vue项目实战:实战技巧总结
30 1