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

   <div ref="editor" style="text-align: left" class="text"></div>

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下，看看控制檯有沒有自己要的