在同一个jsp下使用两个不同的Ueditor时，第二次加载的Ueditor会失败

最新推荐文章于 2022-05-07 17:33:47 发布

weixin_33840661

最新推荐文章于 2022-05-07 17:33:47 发布

阅读量289

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3676955/blog/1921021

版权

2019独角兽企业重金招聘Python工程师标准>>>

场景：在一个父jsp页面中，存在两个模态框，在点击新增xx时，新增的模态框中会放入一个jsp页面，这张jsp页面中带有一个编辑器；同理，点击修改xx时一样。

错误：每当我第一次点击新增/修改时，编辑器可以出现，但当我点击修改/新增时便加载不出来。

百度搜索后发现是这个原因：

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

jQuery(function($) {
    UE.getEditor('_editor').render('_editor')
})
也可以这样：

jQuery(function($) {
    UE.delEditor('_editor');
    var ue = UE.getEditor('_editor');
})

但是我在打开新增或者修改对应的jsp中加上$(function() {上面的解决方案}）后，发现并没有生效。

解决方案：尝试了一种新的思路，即在模态框关闭的时候调用UE.delEditor();测试过后生效，如下

// 关闭Dialog前移除编辑器
 		$('#updateDetailModal').on('hidden.bs.modal', function () {
 			UE.delEditor('editorUpdate');
		});
		$('#addDocModal').on('hidden.bs.modal', function () {
			UE.delEditor('editor');
		});

但是又出现了一个新的js异常：Cannot read property 'scrollTo' of undefined,每当我初始化编辑器后，鼠标往上滚到页面顶部时就会报这个，

下面是该异常的解决方案：

ueditor.all.js的如下内容加一个判断

转载于:https://my.oschina.net/u/3676955/blog/1921021