vue项目中，wangEditor同时存在多个editor对象时，显示错误

最新推荐文章于 2025-10-10 03:26:49 发布

原创最新推荐文章于 2025-10-10 03:26:49 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

问题积累专栏收录该内容

4 篇文章

订阅专栏

在Vue项目中使用wangEditor时，由于id和key必须唯一，且不建议直接通过id创建多个editor对象，可能导致显示错误。推荐利用vue的ref属性来创建和管理多个editor实例。

部署运行你感兴趣的模型镜像

原因

1.id只能唯一
2.v-for循环，key只能唯一
3.最好不要用id（即使id是唯一的）去new 一个editor对象，可能会出错，使用vue的ref去new（我遇到的，花了半天时间，很烦）

代码：

<div ref="text-container" class="text"></div>
<div ref="toolbar-container" class="toolbar"></div>

//初始化富文本编辑器
        this.editor = new E(this.$refs['toolbar-container'], this.$refs['text-container']);
        this.editor.config.height = 50;
        // console.log()
        this.editor.config.zIndex = 10;
        this.editor.config.placeholder = "请输入";
        this.editor.config.colors = ["#000000", "#eeece0", "#1c487f", "#4d80bf"];
        this.editor.config.menus = [
          "bold",
          "italic",
          "code",
          "underline",
          "emoticon",
          "justify",
        ];
        this.editor.create();