Question

我正在使用Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html。我想获取keyup的值并将文本插入另一个div。 cleditor带有我正在下面的jsfiddle示例中使用的change（）事件，但这与keyup不同。我希望在我输入时更新div。我尝试过键盘，但它不起作用。

这就是我现在所拥有的

$("#input").cleditor().change(function(){
    var v = $('#input').val();
    $('#x').html(v);
})

检查jsfiddle http://jsfiddle.net/qm4G6/11/

Answer 1

似乎cleditor隐藏了textarea并将其替换为iframe（请参阅第100条来自cleditor来源）。

为了达到你想要的效果，你只需要访问生成的iframe内容：

$("#input").cleditor();

$(".cleditorMain iframe").contents().find('body').bind('keyup', function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
});

Updated jsFiddle

更新以解决Tim的评论

这适用于Chrome和Firefox（我无法访问IE）：

$("#input").cleditor();

$( $(".cleditorMain iframe")[0].contentWindow.document ).bind('keyup', function(){
    var v = $(this).text(); // or .html() if desired
    $('#x').html(v);
});

Updated jsFiddle

更新2

用户ima007能够找到更好的跨浏览器解决方案：jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE

Answer 2

我能够通过略微修改编辑器的源代码来实现这一点 - 在refresh方法（第801行）中，我修改了iframe doc的模糊事件处理程序。

上

// Update the textarea when the iframe loses focus
    ($.browser.mozilla ? $doc : $(contentWindow)).blur(function() {
      updateTextArea(editor, true);
    });

修改为

// Update the textarea when the iframe loses focus or keyup happens
        ($.browser.mozilla ? $doc : $(contentWindow)).bind('blur keyup', function (e) {
            updateTextArea(editor, true);

            if (options.keyup && e.type === 'keyup')
                options.keyup(editor.$area.val());
        });

并且在初始化时传递的选项中，您可以定义

$("#element").cleditor({
keyup : function (text) {
 alert(text);
 // do something
}
});

希望这有助于任何人。

此致

Answer 3

您是否尝试过使用CLEditor'.doc'属性？

doc - 当前正在iframe中编辑的文档对象。 cleditor documentation

var inputDoc = $("#input").cleditor().doc;

$(inputDoc).keyup(function(){
    var v = $('#input').val();
   $('#x').html(v);
})

jQuery Cleditor在keyup上获得textarea值

3 个答案: