场景:在一个父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的如下内容加一个判断