项目场景：

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(){
//初始化UEditorthis.editor = window.UE.getEditor('editor', this.editorConfig);
}

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

 mounted() {//初始化UEditorthis.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判断，则先执行判断，再渲染编辑器，那么编辑器将不能正常渲染

UEditor富文本编辑器不显示问题相关推荐

Ueditor富文本编辑器
Ueditor富文本编辑器 Ueditor富文本编辑器插件应用步骤如下: 1.引入css和js文件 2.设置承载标签设置富文本编辑器的承载标签,必须设置id属性.一般使用textarea或scrip ...
ueditor富文本编辑器过滤了代码，如何取消？
后台UEditor富文本编辑器,编辑的代码被强制过滤,并被强制修改成<p>标签?导致前台页面效果不对? ueditor富文本编辑器,虽然好用,但是很多时候,如果没有足够的使用经验,一般是很 ...
java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
php引入百度Ueditor富文本编辑器
php引入百度Ueditor富文本编辑器文本编辑器插件内容丰富,比起传统的textarea标签输入要好用很多,看看如何在页面实现引入吧 1.下载适合的资源包(可以去官网下载适合的版本),我是php引 ...
Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
java 百度副文本_spring boot 、springMVC环境集成百度ueditor富文本编辑器
spring-boot-mvc-ueditor-qiniu spring boot .springMVC环境集成百度ueditor富文本编辑器,使用七牛云存储图片依赖库版本: spring boot ...
ueditor富文本编辑器使用百度地图自定义动态地图组件及兼容https及http协议
ueditor富文本编辑器默认支持百度地图组件,但是如果导入动态地图后会加很多默认的地图组件在上面.如果需要自定义动态地图的组件则需要修改ueditor特定的html. ueditor百度地图组件所在 ...
QT QWebEngineView+UEditor富文本编辑器
QT QWebEngineView+UEditor富文本编辑器一.简述记--简单使用QWebEngineView+UEditor富文本编辑器实现一个简单的编辑器,支持图片(支持右键粘贴,支持直接拖 ...

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

项目场景：

问题描述：

原因分析：

解决方案：

UEditor富文本编辑器不显示问题相关推荐

最新文章

热门文章