UEditor不能重新加载的问题

页面中有一个下拉框，根据这个下拉框选中的值来动态加载不同的UEditor。

根据《JavaScript DOM 编程艺术》这本书里的指示，我遵循了“预留退路”的原则，也就是说不能完全依赖于脚本来实现重要功能，因为万一用户的浏览器不支持脚本中的某些功能，其代价是重要功能的丧失。在我的项目里，用户需要靠编辑器来给题库中添加题目，所以我直接在网页中硬编码了一些简单的input控件，这样即使脚本出现问题，用户依然可以正常使用。如果脚本没有问题，则用脚本来动态的将这些朴素的input控件替换为功能更加齐全的UEditor。

为了测试这项功能，我并没有在网页刚刚加载时就调用getEditor(),而只将getEditor()的调用放在了下拉框的change()函数里。当网页刚加载时输入框都是简单的input控件，然后我在下拉框中随便选择一项，input控件被清空，对应的UEditor控件被载入。事实上，目前为止，我还没有定制其他题型对应的UEditor，也就是说，如果现在我在下拉框中重新选择一项，它的change()函数只是重新加载当前的这个UEditor而已，可是这次却出问题了。旧的UEditor被清空了，可是新的UEditor却没有被重新加载出来。

通过对比两次选择下拉框选项之后网页的变化，我发现了原来UEditor API中的getEditor()函数在加载UEditor的同时，会在网页中添加好多东西：

加载UEditor之前：

加载UEditor之后

所以如果再次重新加载UEditor，getEditor()又试图向文档中添加这些内容，可是这些内容已经在文档中存在了，于是便产生错误，这也是为什么只有第一次能够正常加载的症候所在，因为在第一次加载之前，文档中是不存在这些乱七八糟的东西的。

这里还有一点应该注意，那就是UEditor在其script标签中使用了defer属性，而只有 Internet Explorer 支持 defer 属性。具体请看HTML<script> 标签的 defer 属性虽然现在没出问题，谁知道以后这会捅出什么篓子，在此Mark备查。

我首先想到的是，每次重新加载之前先把这些东西从文档树中删掉，后来发现这样工作量实在太大，而且很容易出错，所以我偷了个懒，干错让整个页面重新刷新算了，刷新后无论如何UEditor添加的垃圾都会被清除掉的（虽然性能有所减低，但个人觉得，实现功能为主，性能优化为次）。

不过刷新整个页面，就要把用户当前选中的项也传过去，不然等于什么也没做。

$(document).ready(function()
{
    $("#typeList").change(function () {
        var oldSelect = $("#typeList").val();
        window.location.href = '../UnitTestManager/Details?unitTestId=' + $("#unitTestId").val() + '&selected=' + oldSelect;
    });
    loadPartialView($("#typeList").val());
});
});

其中oldSelect就是用户当前选中的下拉框中的项，这里通过url传递给刷新后的页面。

然后使用loadPartialView(type)函数来加载具体类型的编辑器。（参数是下拉框中用户选中的值）

p.s. 我本来是把loadPartialView放在change函数中的，后来发现刷新页面的操作会在退出change()函数之后才执行，所以会看到页面上编辑器先成功加载出来，紧接着页面刷新后又啥都没有了。所以将loadPartialView放在change()函数外面，可以先让页面刷新，之后再加载编辑器。

转载于:https://www.cnblogs.com/chansonzhang/p/4523277.html