解决ueditor二次加载(getEditor)加载失败的问题

摘要:
editor){editor=instances[id]=newUE.ui.Editor;editor.render;}returneditor;};UE.delEditor=function{vareditor;if{editor.key&&editor.destroy();deleteinstances[id]}};这段可以看到,在调用UE.getEditor初始化UEditor时,先从放置编辑器的容器instances中获取,没有实例才实例化一个Editor,这就是引起问题的原因。在第一次跳转到编辑器界面时,正常的实例化了一个新的编辑器对象,并放入instances,调用editor.render渲染编辑器的DOM;第二次初始化时却仅从容器中取到实例:vareditor=instances[id];直接返回了editor对象,而编辑器的DOM并没有渲染。

最近在做项目的时候用到了ueditor控件,正常使用第一次加载没有问题,因为没有刷新页面,第二次加载的时候就会加载失败,ueditor部分出现空白,查看了一下功能基本可以定位到是getEditor时出现了问题,具体怎么解决直到我发现了下面的这篇博文,具体内容如下:

大家自己看看官方的js文件ueditor.all.js有以下的代码

/**
     * @name getEditor
     * @since 1.2.4+
     * @grammar UE.getEditor(id,[opt])  =>  Editor实例
     * @desc 提供一个全局的方法得到编辑器实例
     *
     * * ''id''  放置编辑器的容器id, 如果容器下的编辑器已经存在,就直接返回
     * * ''opt'' 编辑器的可选参数
     * @example
     *  UE.getEditor('containerId',{onready:function(){//创建一个编辑器实例
     *      this.setContent('hello')
     *  }});
     *  UE.getEditor('containerId'); //返回刚创建的实例
     *
     */UE.getEditor =function (id, opt) {
        var editor =instances[id];
        if (!editor) {
            editor = instances[id] = newUE.ui.Editor(opt);
            editor.render(id);
        }
        returneditor;
    };
 
 
    UE.delEditor =function (id) {
        vareditor;
        if (editor =instances[id]) {
            editor.key &&editor.destroy();
            delete instances[id]
        }
    };

这段可以看到,在调用UE.getEditor(‘_editor’)初始化UEditor时,先从放置编辑器的容器instances中获取,没有实例才实例化一个Editor,这就是引起问题的原因。
在第一次跳转到编辑器界面时,正常的实例化了一个新的编辑器对象,并放入instances,调用editor.render(id)渲染编辑器的DOM;
第二次初始化时却仅从容器中取到实例:var editor = instances[id]; 直接返回了editor对象,而编辑器的DOM并没有渲染。

【解决方案】:
再次使用时先删除之前的实例化对象,再进行再次实例化

UE.delEditor('editor'); //先删除之前实例的对象
UE.getEditor('editor'); //添加编辑器

或者如下解决,对目标DOM进行手动渲染

UE.getEditor('editor').render('editor'); //使用之前的对象(同时渲染DOM)

以上解决方案本人亲测可用

————————————————
版权声明:本文为CSDN博主「隔壁小王攻城狮」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/df981011512/article/details/69678711

免责声明:文章转载自《解决ueditor二次加载(getEditor)加载失败的问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇drf框架(五)js 文件下载下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

国内技术帝不输国外 CryEngine 3引擎下 混血编辑器 诠释究极画质

有一款游戏,它用真实且精美的画质征服了无数的玩家,在06年E3展上,它绽放了耀眼的光彩,拿下了当年几乎所有画面上的奖项。大家应该已经猜到了,它就是《孤岛危机》。 在《孤岛危机》发售后几年里,制作商Crytek发布了一部又一部介绍他们引擎的强悍的短片,使得玩家对续作充满了期待。 2011年3月,游戏将正式发售,被各种震撼宣传片以及奔着音乐制作人的玩家终于可...

KindEditor 一款好用的HTML可视化编辑器(富文本编辑器)

  KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。...

百度UEditor上传图片-再再总结一次

本周,CSDN有个网友遇到了百度UEditor上传问题,最后商定付50元钱,我帮他解决这个问题。    他最初想自己搞定这个问题,结果搞了好多次,好几天,还是没能解决。    2015年1月17日8:25~2015年1月18日00:24,4个小时终于搞定了这个问题。 1.总的感悟    本来预计1个小时,就能解决的,结果硬是花费了4个小时,挺无奈的。 虽说...

vi编辑器的学习使用(七)

vi编辑器学习使用之七vi是一个强大的编辑器,他不仅可以用来处理我们平时的文本工作,他还可以用写程序文件。在vi中有许多命令可以方便的完成我们的程序处理工作。在用vi进行程序处理时,vi充分的显示出来了他的强大之处,他可以实现在语法加亮显示,实现自动缩进,实现括号匹配,还可以在程序中实现查找和跳转。我们可以用这样的命令在vi中打开语法加亮显示的功能::sy...

富文本编辑器UEditor自定义工具栏(一、基础配置与字体、背景色、行间距、超链接实现)

导读:UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,功能强大,可定制,是一款优秀的国产在线富文本编辑器,编辑器内可插入图片、音频、视频等。 一、UEditor自定义工具栏效果图如下: 二、UEditor富文本编辑器环境搭建及项目引用 环境搭建不再赘述,请自行查阅或者参考以下链接 1.UEditor官网:http://u...

Unity3D for iOS初级教程:Part 1/3(上)

                                                              Unity3D for iOS初级教程:Part 1/3(上) 这篇教材是来自教程团队成员 Christine Abernathy, 他是Facebook的开发支持团队的工程师。Unity是最为流行的游戏引擎之一。这是有充分缘由的:U...