jQuery Cleditor nhận giá trị văn bản trên keyup

Question

Tôi đang sử dụng Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html. Tôi muốn lấy giá trị trên keyup và chèn văn bản vào div khác. cleditor đi kèm với sự kiện change() mà tôi hiện đang sử dụng trong ví dụ jsfiddle bên dưới, nhưng thats không giống như keyup. Tôi muốn div được cập nhật khi tôi đang nhập. Tôi đã thử khóa nhưng nó không hoạt động.

Dưới đây là những gì tôi có bây giờ

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

Kiểm tra jsfiddle http://jsfiddle.net/qm4G6/11/

Answer 1

Dường như cleditor ẩn textarea và thay thế nó bằng một iframe (xem dòng 203 của nguồn cleditor).

Vì vậy, để đạt được những gì bạn muốn, bạn chỉ cần truy cập vào kết quả iframe nội dung:

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

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

Updated jsFiddle

UPDATE để giải quyết nhận xét của Tim

này hoạt động trong Chrome và Firefox (Tôi không có quyền truy cập vào IE):

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

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

Updated jsFiddle

UPDATE 2

tài ima007 đã có thể tìm thấy một giải pháp tốt hơn qua trình duyệt: jQuery Cleditor wysiwyg text editor: keyup() works in webkit browsers but not Firefox or IE

Answer 2

tôi đã có thể đạt được điều này bằng cách hơi sửa đổi mã nguồn của trình biên tập - trong phương thức refresh (dòng 801) Tôi đã sửa đổi trình xử lý sự kiện mờ của tài liệu iframe.

Previous

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

Modified để

// 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()); 
     }); 

và trong các tùy chọn mà được thông qua tại thời điểm khởi động, bạn có thể xác định

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

Hope this helps bất cứ ai.

Kính trọng

Answer 3

Bạn đã thử sử dụng thuộc tính CLEDitor '.doc' chưa?

doc - Đối tượng tài liệu hiện đang được chỉnh sửa trong khung nội tuyến. cleditor documentation

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

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