Ueditor在弹出窗口中无法显示

想在弹出窗口中显示百度的富文本编辑器插件ueditor;
弹出窗口用的是jQuery ui的dialog方法;
如果页面加载后直接弹出窗口的话,可以显示ueditor;
但是如果通过按钮点击弹出窗口的话,就无法显示ueditor;
ueditor应该是网页加载的时候就自动创建的,现在通过点击按钮弹出窗口如何加载?

表单代码(HTML部分):

<form id="question" title="提问">
    <p>
        <label for="title">问题名称:</label>
        <input type="text" class="text" name="title" id="title" style="width: 520px;" />
        <span class="star">*</span>
    </p>
    <p>
        <script id="myEditor" type="text/plain"></script>
    </p>
</form>

ueditor初始化代码:

<script>
    var um = UM.getEditor('myEditor');
</script>

点击按钮弹窗的代码:

 $('#question').dialog({
        autoOpen : false,
        resizable : false,
        modal : true,
        width : 600,
        height : 450,
        buttons : {
            '发布' : function(){
                $(this).submit();
            },
            '取消' : function(){
                $(this).dialog('close');
            }
        },
        closeText : '关闭',
    });

$('#question_button').button().click(function(){
        $('#question').dialog('open');
    });

2个回答

  1. 先做一个适应jquery的插件,命名为:jquery-ueditor.js (function ($) { // 注册jQuery插件 $.fn.ueditor = function () { // 如果通过jQuery获取了多个元素,可以创建多个编辑器 for (var i = 0; i < this.length; i++) { // UEditor会自己管理各个编辑器实例,不会重复创建 UE.getEditor(this[i].id); } // 只返回第一个元素对应的编辑器实例。因此,如果要获取编辑器,使用的选择器应该只匹配一个元素,多余的元素将忽略 return UE.getEditor(this[0].id); }; })($);

2.将ueditor.config.js, ueditor.all.js, jquery-ueditor.js 引用到HTML文件中

<script type="text/javascript" charset="utf-8" src="uEditor/ueditor.all.js"> </script>
<script type="text/javascript" charset="utf-8" src="js/jquery-ueditor.js"> </script>
  1. js文件中正常使用ueditor就可以了,$('###').ueditor();

这个其实想要两种方式可以实现,但是要理解 UE.getEditor()这个函数做了什么,第一次的时候传入id的参数的时候,**会检测之前**有没有实例化过,有的话,就返回这个实例化的对象,否则就会新建

第一种方式,固定id:

UE.getEditor("id", 实例化完之后,放在一个隐藏的页面dom元素,使用的时候才去用将这个html放在想要用的地方,就是相当于一次实例化,到处可以copy;

第二种方式,动态id(推荐)

UE.getEditor(id, 这个id是动态的,可以用一个时间戳的方式去实现,想要用的时候就做一个时间戳的id到里面去,特别适合弹窗,里面显示,然后就可以多次弹窗,多次实例化,可能要注意一下一些字号的选择时候,遇到z-index的层级问题

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

ueditor 自定义标签不显示

如网上很多文档说的,在ueditor.config.js 中toolbars 中添加了新标签 'mytest', 然后在 ueditor.all.js中btnCmds添加'mytest':'测试'后,并没有显示默认图标为'B' 的新图标,请问这是怎么回事?求解决方案

ueditor上传图片后台配置无法加载问题

百度ueditor上传图片显示后台配置项无法加载,在控制台显示如下错误,有没有人遇到这种问题 ![图片说明](https://img-ask.csdn.net/upload/201711/13/1510568115_904691.png)

ueditor页面不显示工具栏,显示代码

我的js路径没有问题,页面是html,具体情况是这样的。![图片说明](https://img-ask.csdn.net/upload/201707/16/1500213957_![图片说明](https://img-ask.csdn.net/upload/201707/16/150021397![图片说明](https://img-ask.csdn.net/upload/201707/16/1500213988_199987.png)4_311486.png)120298.png)

UEditor弹出框中确认按钮怎么绑定事件

如图: 我想实现点击确认按钮后不再编辑器内显示,求大神指教![图片说明](https://img-ask.csdn.net/upload/201703/03/1488522786_803188.jpg)

请教:ueditor加入到Javaweb工程,不起作用,只显示空白页,怎么回事?

引入ueditor后,已经配置好了,但是浏览器访问是空白页,什么都没有显示,这是怎么回事?

layer ui 在父页面弹出的窗口中,查看图片如何让图片不受窗口限制,全屏显示

layer UI 在弹出的窗口下如何查看图片时,图片不受窗口的限制,能遮盖窗口, 全屏显示。目前遇到的问题是查看图片时图片只是在窗口的范围下面看,这样 图片看不全,不符合设计要求

把带图片的邮箱正文复制到ueditor编辑器里,编辑器里图片显示,前台页面不显示

把带图片的邮箱正文复制到ueditor编辑器里,编辑器里图片显示,前台页面不显示

ueditor在bootstrap框架中失效问题?

ueditor在普通页面加载正常,放入bootstrap框架内,工具栏不显示,请问这种情况您遇到过吗?是什么情况? 还望各位大神赐教! [图片说明](https://img-ask.csdn.net/upload/201708/04/1501835570_865349.jpg)

UEditor实例化后显示异常

不知道怎么的这个编辑器实例化会这样显示 因为之前在eclipse里面跑过两次正常的 但是浏览器访问就是这样的 后面无论eclipse还是浏览器访问都是这个样子了 三个js文件我都引进去了的呀 那个window.HOME_URL也是配置的/ xxx/ xxx/utf8-jsp/ 请大神点bug![图片说明](https://img-ask.csdn.net/upload/201809/03/1535989107_289608.png) ![图片说明](https://img-ask.csdn.net/upload/201809/03/1535989153_687627.png)

UEditor java自定义图片上传问题,上传成功图片显示路径是loading

页面js设置 ![图片说明](https://img-ask.csdn.net/upload/201711/21/1511246499_161263.jpg) 页面图片显示正常 ![图片说明](https://img-ask.csdn.net/upload/201711/21/1511246383_230499.jpg) java自定义图片上传,文件路径返回正常,但是在UEditor文本中保存出问题了,变成这个了“<img class=loadingclass id=loading_ja97yzk0 src=http://localhost:8080/ueditor/themes/default/images/spacer.gif title=正在上传.../>“ ,请问下这是什么原因导致的呢?

请问下UEditor 在IE上单图上传出现图片上这种情况怎么搞定?

![图片说明](https://img-ask.csdn.net/upload/201705/27/1495849233_515310.png)

在Vue中引入ueditor时,加入ueditor.parse.min.js报错

我在Vue中引入ueditor时,不加入ueditor.parse.min.js时是好的,但是引入ueditor.parse.min.js后,会报![图片说明](https://img-ask.csdn.net/upload/201807/04/1530694358_567644.png) ``` import './static/UE/ueditor.config.js' import './static/UE/ueditor.all.min.js' import './static/UE/lang/zh-cn/zh-cn.js' **import './static/UE/ueditor.parse.min.js'** ```

ueditor 如何将带有格式的文本保存在数据库中

请问如何将ueditor中带有格式的文本保存在数据库中,在另一页面显示时会显示带有格式的文本。

最近用了 百度出的ueditor,但是不显示工具栏。

显示出了代码,我是按照demo里面导入js路径的。![图片说明](https://img-ask.csdn.net/upload/201707/16/150021![![图片说明](https://img-ask.csdn.net/upload/201707/16/1500213576_100393.png)图片说明](https://img-ask.csdn.net/upload/201707/16/1500213563_169017.png)3547_193778.png)

关于asp中使用ueditor图片上传成功,但是点确定按钮没反应,编辑器中也什么都不显示

官方下载Ueditor1.4.3.3版本,只更改了ueditor.config.js中URL的路径 var URL = window.UEDITOR_HOME_URL || getUEBasePath(); 改为 var URL = window.UEDITOR_HOME_URL||"/ueditor/"; 这样图片上传成功,但是点确定按钮没反应,在“在线图片”中能看到刚才上传的图片,选中还是点确定没反应,看了好几天也没能解决,特来请教,希望得到您的指点,谢谢!或者留下联系方式,我来联系您!

ueditor视频无法播放,求各位大哥帮帮忙

![图片说明](https://img-ask.csdn.net/upload/201603/07/1457342535_968350.png)求大神帮我看看

Ueditor 不显示急急急,

ueditor 在jsp界面直接打开就能显示,但是前面登陆后在跳转到ueditor所在的界面,就不能显示了,求教啊

div 标签 怎么覆盖 ueditor

现在再做一个等待效果 后台处理时 页面显示一个覆盖整个页面的div 里面包括一个等待的gif图片 但是页面有ueditor 的情况下 div 会在ueditor下面 求帮助 怎么把 ueditor也覆盖了

在项目中添加Ueditor编辑器,需要在后台操作是什么

对Ueditor不熟,除了填加好Ueditor后,还需要哪些操作,求指导

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c# 开发接口 c# 中方法上面的限制 c# java 时间戳 c#单元测试入门 c# 数组转化成文本 c#实体类主外键关系设置 c# 子函数 局部 c#窗口位置设置 c# list 查询 c# 事件 执行顺序
立即提问
相关内容推荐