javascript - Kendo Editor + show ("slide") 在 Firefox 中不可编辑

Question

请引用JSFiddle用于此问题的工作演示。

在 Firefox(最新版本，24)中，如果我使用 jQuery UI 的 .show("slide", { direction: "right"}) 来显示 kendoEditor，编辑器不包含我设置的值，它是不可编辑的。如果我使用 jQuery 中的普通旧 .show()，那么一切正常。它在 Chrome 30 和 IE 10 中也能正常工作。为什么 .show("slide") 会破坏 Firefox 中的编辑器，是否有解决此问题的方法？

此示例的 HTML:

<button id="btn1" type="button">Button 1</button>
<button id="btn2" type="button">Button 2</button>
<div id="div">
    <textarea data-role="editor" data-bind="value: TheValue"></textarea>
    <button id="hide" type="button">Hide</button>
</div>

这是不起作用的JS代码:

$(document).ready(function () {
    var model;
    function bindDiv(value) {
        model = kendo.observable({ TheValue: value });
        kendo.bind($('#div'), model);
        $('#div').show("slide", { direction: "right" });
        //$('#div').show();
    }
    $('#div').hide();
    $('#btn1').click(function () { bindDiv('hello'); });
    $('#btn2').click(function () { bindDiv('goodbye'); });
    $('#hide').click(function () {
        console.log(model.get('TheValue'));
        $('#div').hide("slide", { direction: "right" });
        //$('#div').hide();
    });
});

单击 btn1 应该会导致编辑器显示文本 “hello”，然后单击“隐藏”应该会在控制台中显示编辑的文本。 如果您将这两行 "slide" 替换为普通的注释掉版本，那么它工作正常(但看起来不那么酷)。

有谁知道为什么这不起作用，或者我能做些什么？

更新:

在动画播放之前，一切正常 - 编辑器的 iframe 正文具有正确的内容，并标有 contenteditable 属性。动画完成后，iframe 的主体被清除干净——没有内容，没有属性。我仍在努力弄清楚为什么会这样以及该怎么办。

Answer 1

如果您将 KenoUI 版本升级到最新的 Q2 2013(版本 2013.2.716)，那么 Kendo 编辑器有一个 new method called: refresh哪个

refresh
Reinitializes the editing area iframe. Should be used after moving the editor in the DOM.

所以它完全符合您的需要，因为动画移动了编辑器 iframe，您需要在它完成时调用刷新:

$('#div').show("slide", { direction: "right" }, function () {
    var editor = $("#editor").data("kendoEditor");
    editor.refresh();
});

要完成这项工作，您还需要更改您的 View 并为您的文本区域提供一个 id:

<div id="div">
    <textarea id="editor" data-role="editor" data-bind="value: TheValue">
    </textarea>
</div>

演示 JSFiddle .