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

Vue中使用wangeditor踩坑及解决

最新推荐文章于 2025-10-03 22:47:46 发布

原创最新推荐文章于 2025-10-03 22:47:46 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了在Vue项目中集成富文本编辑器wangeditor的步骤，包括npm安装、组件引用以及遇到的报错问题。通过浏览器调试找到解决层级和内容获取的方法，重点在于利用editor.config.onchange和editor.zIndex.baseZIndex来获取内容和调整层级。当遇到取值问题时，建议通过console.log进行排查。

地址: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下，看看控制台有没有自己要的