5

请参阅JSFiddle以获得此问题的工作演示。

在 Firefox（最新版本，24）中，如果我使用 jQuery UI.show("slide", { direction: "right" })显示 kendoEditor，编辑器不包含我设置的值，并且它不可编辑。.show()如果我使用jQuery中的普通旧版本，那么一切正常。它在 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 的 body 有正确的内容，并用contenteditable属性进行了标记。动画完成后，iframe 的主体被擦除干净 - 没有内容，没有属性。我仍在试图弄清楚为什么以及如何处理它。

4

3 回答 3

2

如果您将 KenoUI 版本升级到最新的Q2 2013（版本 2013.2.716），那么 Kendo 编辑器有一个新方法，称为：refresh which

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

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

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

要完成这项工作，您还需要更改视图并为您的 textarea 提供一个 id：

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

演示JSFiddle。

于 2013-10-29T19:59:38.967 回答
2

好的，所以，当发生幻灯片效果时，iframe 无法正确显示...

我找到的解决方案是在幻灯片效果结束时重新绑定编辑器。但是需要在隐藏中摧毁它，否则会出现一些冲突。

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>');

}
于 2013-10-28T20:38:03.687 回答
1

"slide"是一个jquery-ui 效果- 与jQuery“基本”效果相反。

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

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

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

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

于 2013-10-30T08:50:17.890 回答