jQuery Cleditor在keyup上獲得textarea值

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替換它（參見cleditor source的第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 wysiwyg文本編輯器：keyup（）適用於webkit瀏覽器但不適用於Firefox或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中編輯的文檔對象。 保證人文件

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

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