jQuery Cleditor在keyup上获取文本区域值

Question

我用的是http://premiumsoftware.net/cleditor/docs/GettingStarted.html。我希望在keyup上获得值，并将文本插入另一个div中。cleditor附带了更改()事件，我目前在下面的jsfiddle示例中使用了这个事件，但这与keyup不一样。我想在输入时更新div。我试过键控，但不起作用。

这是我现在拥有的

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

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

Answer 1

cleditor似乎隐藏了textarea，并将其替换为iframe (参见cleditor源的第203行)。

因此，要实现您想要的结果，只需访问生成的iframe内容：

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

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

更新的jsFiddle

更新以回应的评论

这适用于Chrome和Firefox (我无法访问IE)：

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

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

更新的jsFiddle

更新2

用户ima007找到了一个更好的跨浏览器解决方案：jQuery Cleditor文本编辑器: keyup()适用于webkit浏览器，但不适用于火狐或IE。

Answer 2

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

上一首

// 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中当前正在编辑的document对象。剪贴器文档

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

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