剑道编辑器 + show(“slide”） 在 Firefox 中不可编辑

Kendo Editor + show("slide") is not editable in Firefox

本文关键字：Firefox 编辑 slide 编辑器 show      更新时间：2023-09-26

请参考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 的主体将被擦除干净 - 没有内容，没有属性。 我仍在努力弄清楚为什么以及如何处理它。

如果将 KenoUI 版本升级到最新的 2013 年第 2 季度（版本 2013.2.716），则剑道编辑器将有一个名为的新方法： refresh


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

因此，它完全符合您的需求，因为动画会在完成后移动您需要调用刷新的编辑器 iframe：

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

要完成这项工作，您还需要更改视图并为您的文本区域提供 id：

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

演示 JSFiddle。

好的

，所以，当幻灯片效果发生时，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>');
}

"slide"是jquery-ui效应 - 与jQuery"基本"效应相反。

所有jquery-ui效果的工作方式如下：它们将选定的节点包装在节点内，对包装器进行动画处理，然后解开内容。

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

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

您可以尝试将效果替换为调用 .animate() ，或者，正如其他人建议的那样，尝试重新绑定或刷新您的剑道观察器。

相关文章：