UEditor富文本编辑器不显示问题

项目场景：

vue中if判断后使用文本编辑器（误区）

问题描述：

在div中使用v-if判断是否显示UEditor富文本编辑器，在判断为true的情况下富文本编辑器并未加载出。

<!-- 判断富文本编辑器是否显示 -->

            <div class="panel" v--if="Id=='487937'">

              <div style="height: 900px;width:1000px;overflow-y: auto;overflow-x: hidden;padding-left:10px">

                <div id="editor"></div>

              </div>

            </div>
           

原因分析：

第一时间去查看created页面加载是否初始化UEditor，以下代码显示已经初始化，并不是这个原因。

created(){ 
//初始化UEditor
      this.editor = window.UE.getEditor('editor', this.editorConfig);
}
           

 又想到是否页面初始化完成时，UEditor的初始化未完成导致的，于是把UEditor的初始化放在了mounted中：

mounted() {
      //初始化UEditor
      this.editor = window.UE.getEditor('editor', this.editorConfig);
}
           

然而，并没有什么用，依旧解决问题。

第三次尝试着把富文本的div换一个位置，结果它出来了！！！！

解决方案：

if判断改用动态类设置富文本编辑框的显示和隐藏：

CSS:

.ue-editor {
    display: block;
  }

  .ue-editorHidden {
    display: none;
  }
           

HTML：

//初始化设置编辑器隐藏
<div class="ueEditorHidden ue-editorHidden">
                <div style="height: 900px;width:1000px;overflow-y: auto;overflow-x: hidden;padding-left:10px">
                  <div id="editor"></div>
                </div>
 </div>
           

JS:

watch:{

Id(val){
 
 if (val=='487937') {//true:移除隐藏类ue-editorHidden 、添加类ue-editor显示：false：不执行操作
        $('.ueEditorHidden').removeClass('ue-editorHidden');
        $('.ueEditorHidden').addClass('ue-editor');
    }

}
           

我的理解：执行顺序的问题，如果用if判断，则先执行判断，再渲染编辑器，那么编辑器将不能正常渲染