UEditor富文本编辑器不显示问题
项目场景:vue中if判断后使用文本编辑器(误区)问题描述:在div中使用v-if判断是否显示UEditor富文本编辑器,在判断为true的情况下富文本编辑器并未加载出。<!-- 判断富文本编辑器是否显示 --><div class="panel" v--if="Id=='487937'"><div style="height: 900px;width:1000px;
·
项目场景:
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判断,则先执行判断,再渲染编辑器,那么编辑器将不能正常渲染
更多推荐
已为社区贡献1条内容
所有评论(0)