Trình soạn thảo văn bản jQuery Cleditor wysiwyg: keyup() hoạt động trong trình duyệt webkit nhưng không phải Firefox hoặc IE

Question

Tôi đang cố theo dõi câu hỏi Stackoverflow trước đây về cách hiển thị nội dung từ hộp văn bản Cleditor trong phần tử HTML bên ngoài chẳng hạn như <p>. Dưới đây là the question và the fiddle mà giải quyết vấn đề của tôi trong các trình duyệt webkit nhưng không phải trình duyệt Firefox hoặc IE:

Dưới đây là mã từ fiddle:

<textarea id="input" name="input"></textarea> 
<p id="x"></p> 

<script> 
    $("#input").cleditor(); 

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

Tôi đã đọc Get content of iframe from jquery rằng tôi cần phải sử dụng "window.top. ... để truy cập vào trang chính và chuyển nó theo cách đó bởi vì .contents() không được hỗ trợ bởi tất cả các trình duyệt "nhưng tôi không chắc chắn cách sử dụng window.top cho mục đích này và tôi hy vọng ai đó có thể đổ một số ánh sáng về chủ đề này.

Answer 1

Các tài liệu cleditor khẳng định rằng nó không có một "sự thay đổi" sự kiện mà họ tuyên bố để làm việc với các sự kiện 'KeyUp', nhưng tiếc là trong thử nghiệm của tôi nó đã không làm việc như mong đợi với Firefox 7 (yêu cầu nhấp vào trình soạn thảo văn bản).

Jsfiddle: http://jsfiddle.net/qm4G6/27/

Code:

var cledit = $("#input").cleditor()[0]; 

cledit.change(function(){ 
    var v = this.$area.context.value; 
    $('#x').html(v); 
}); 

Ngoài ra còn có một câu hỏi StackOverflow mà được hỏi về điều tương tự, trong đó người dùng Ling gợi ý sửa đổi các plugin để thêm chức năng riêng của bạn: Get content from jquery CLEditor

Chỉnh sửa: Dựa trên nhận xét của bạn với kết quả SO câu hỏi trên không hoạt động, tôi đã sửa đổi mã bên dưới. Tính năng này hoạt động ở chế độ nhà phát triển IE8 và IE9 "IE8". http://jsfiddle.net/qm4G6/80/

$(document).ready(function(){ 

var cledit = $("#inputcledit").cleditor()[0]; 
$(cledit.$frame[0]).attr("id","cleditCool"); 

var cleditFrame; 
if(!document.frames) 
{ 
    cleditFrame = $("#cleditCool")[0].contentWindow.document; 
} 
else 
{ 
    cleditFrame = document.frames["cleditCool"].document; 
} 

$(cleditFrame).bind('keyup', function(){ 
    var v = $(this).text(); 
    $('#x').html(v); 
}); 

}); 

Sửa Một: Để có được HTML, bạn phải tìm cơ thể trong iframe như $(this).find("body").html(). Xem mã bên dưới. JSFiddle: http://jsfiddle.net/qm4G6/84/

var cledit = $("#inputcledit").cleditor()[0]; 
$(cledit.$frame[0]).attr("id","cleditCool"); 

var cleditFrame; 
if(!document.frames) 
{ 
    cleditFrame = $("#cleditCool")[0].contentWindow.document; 
} 
else 
{ 
    cleditFrame = document.frames["cleditCool"].document; 
} 

$(cleditFrame).bind('keyup', function(){ 
     var v = $(this).find("body").html(); 
     $('#x').html(v); 
}); 

$("div.cleditorToolbar, .cleditorPopup div").bind("click",function(){ 
     var v = $(cleditFrame).find("body").html(); 
     $('#x').html(v); 
}); 

Answer 2

Kể từ khi tôi đã trả lời câu hỏi khiến bạn cho điều này, tôi nghĩ tôi sẽ trả lời này quá;)

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

CẬP NHẬT

này cũng hoạt động trong Chrome và Firefox. Có lẽ IE quá?

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

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

jsFiddle