vue中正确使用富文本编辑器wangeditor和使用wangeditor遇到的坑

地址:http://www.wangeditor.com/,

gitHub:https://github.com/wangfupeng1988/wangEditor/blob/master/example/demo/in-vue/src/components/Editor.vue

1）首先终端中安装 npm i wangeditor

   

2) 引入富文本编辑器 import E from "wangeditor"

3）以前的时候这样用时不会报错，现在确不行了，怀疑时wangeditor更新改版了，下的包有些内容不一样，造成下面这个错

  

  4）改变层级的话，我在游览器中调试  ，可以用css改变

  

// /deep/.w-e-toolbar {
    //   z-index: 100 !important;
    // }
    // /deep/.w-e-text-container {
    //   z-index: 100 !important;
    // }

5）当然不用CSS改变的话，要在层级和内容

 var editor = new E(this.$refs.editor); //此处不能用
    console.log(editor);

  发现这个editor 中

 

 editor.config.onchange和editor.zIndex.baseZIndex才取到内容和层级 在按照1）2）操作

 npm i wangeditor

  引入富文本编辑器 import E from "wangeditor"

  mounted() {
    var editor = new E(this.$refs.editor); //此处不能用
    console.log(editor);
    // editor.customConfig.onchange = (html) => {
    //   this.articalObj.content = html;
    // };
    // editor.customConfig.zIndex = 100;  //这个不能用了
    editor.config.onchange = (html) => {
      this.articalObj.content = html;
    };
    editor.zIndex.baseZIndex = 100;
    editor.create();
  },

总结：如果取不到的情况下,可以console.log下，看看控制台有没有自己要的