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

好的，所以，当发生slideeffect时，iframe没有正确显示......

我找到的解决方案是在slideeffect结束时重新绑定编辑器。但是需要在隐藏中摧毁它，否则就会发生一些冲突。

jsfiddle：http://jsfiddle.net/xzftW/18/

代码：

$(document).ready(function () {
    function bindDiv(value) {
       kendo.bind($('#div'), '');
        $('#div').show("slide", { direction: "right" }, function(){
            resetme();
            kendo.bind($('#div'), kendo.observable({ TheValue: value }));
                $('#hide').click(function() {hideme() } ); 
        });        
    }
    $('#div').hide();
    $('#btn1').click(function () { bindDiv('hello'); });
    $('#btn2').click(function () { bindDiv('goodbye'); });    
});


function hideme()
{
    $('#div').hide("slide", { direction: "right" }, function(){    
       resetme();
    });
 }

function resetme()
{
     $('#div').html('<textarea data-role="editor" data-bind="value: TheValue"></textarea><button id="hide" type="button">Hide</button>');

}

Answer 2

如果您将KenoUI版本升级到最新的 2013年第二季度（版本2013.2.716），那么Kendo编辑器会有new method called: refresh

refresh
重新初始化编辑区域iframe。之后应该用在DOM中移动编辑器。

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

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

要完成这项工作，您还需要更改视图并为您提供textarea的身份证明：

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

演示JSFiddle。

Answer 3

"slide"是jquery-ui effect - 而不是jQuery "basic" effects。

所有jquery-ui效果的工作方式如下：它们将选定的节点包装在节点内，为包装器设置动画，然后打开内容。

我不知道剑道对此有何反应。

另一方面，jQuery“基本”效果将DOM保留并修改元素的css属性。

您可以尝试通过调用.animate()来替换效果，或者像其他人建议的那样，尝试重新绑定或刷新您的剑道观察员。

在Firefox中，Kendo Editor + show（“幻灯片”）不可编辑

3 个答案: