wangEditor显示错误

Question

在创建多个editor的时候会出错

是v-for循环创建同一个组件的，组件内只创建了一个editor，不存在同一个组件或页面创建多个的情况

 

只创建一个的时候没问题，第二个明显长了，而且第一个的输入框消失了

 

第二个创建后，第一个就出问题了

 

把第一个重新创建后，莫名消失

 

代码

<template>
  <div class="comment-bar">
    <div class="login-btn" v-if="!isLogin">
      <router-link to="/Login" class="login-btn">登录</router-link> 或 
      <router-link to="/Register" class="register-btn">注册</router-link>
    </div>
    <div class="user-avatar" :style="{backgroundImage: 'url(' + avatar + ')'}" v-if="isLogin && !hideAvatar"></div>
    <div class="comment-banner" ref="commentBanner">
      <!-- <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
        resize="none"
        rows="3"
        :maxlength="maxCount"
        show-word-limit
        >
      </el-input> -->
      <div id="text-container" class="text"></div>
      <div id="toolbar-container" class="toolbar"></div>
    </div>
    <div class="reply-btn">
      <el-button type="primary" @click="replyBtn" :disabled="bandSend">发送</el-button>
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
export default{
  name: 'commentBar',
  data(){
    return {
      textarea: '',
      isLogin: false,
      editor: null,
    }
  },
  props:{
    maxCount: {
      type: Number || String,
      default: 1000
    },
    hideAvatar: {
      type: Boolean,
      default: false
    },
    bandSend: {
      type: Boolean,
      default: false
    }
  },
  computed:{
    avatar(){
      return this.$store.state.userInfo.avatar;
    }
  },
  created(){
    this.loginCheck();
  },
  mounted(){
    this.init();
  },
  destroyed(){
    console.log("xxx")
    this.editor = null;
  },
  methods: {
    // 回复按钮
    replyBtn(){
      if(this.isLogin){
        this.$emit('reply', this.editor.txt.text());
        this.editor.txt.clear();
      } else {
        this.$toast({
          message: '请先登录'
        })
      }
    },
    init(){
      //初始化富文本编辑器
      this.editor = new E('#toolbar-container', '#text-container');
      this.editor.config.height = 500;
      // console.log(this.$refs.commentBanner.offsetHeigth)
      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();
    },
    // 检查是否登录
    loginCheck(){
      this.isLogin = this.$cookies.get('user_token')? true : false;
      // console.log(this.isLogin)
    }
  }
}
</script>

<style scoped>
.comment-bar{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 .05rem;
}
.user-avatar{
  width: .3rem;
  height: .3rem;
  border: 1px solid #fff;
  border-radius: 50%;
  background-size: cover;
}
.comment-banner,.reply-btn{
  display: flex;
}
.comment-banner{
  width: 3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.login-btn{
  font-size: .1rem;
}
#text-container {
  width: 100%;
  /* height: 100%; */
  background-color: #fff;
  font-size: 0.1rem;
}
#toolbar-container {
  width: 100%;
  /* height: 0.1rem; */
  background-color: #fff;
  margin-top: 2px;
}
</style>

Answer 1

麻烦贴一下相关页面的代码和浏览器控制台的错误信息，这样才好分析问题。