Текстовый редактор jQuery Cleditor wysiwyg: keyup() работает в браузерах webkit, но не в Firefox или IE

Question

Я пытаюсь развить предыдущий вопрос Stackru о том, как отображать содержимое из текстового поля Cleditor во внешнем элементе HTML, например <p>, Вот вопрос и скрипка, которая решает мою проблему в браузерах webkit, но не в Firefox или IE:

Вот код из скрипки:

<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>

Я прочитал Получить содержимое iframe из jquery, что мне нужно использовать "window.top.... для доступа к главной странице и передать его таким образом, потому что.contents() поддерживается не всеми браузерами", но я не Я уверен, как использовать window.top для этой цели, и я надеюсь, что кто-то сможет пролить свет на эту тему.

Answer 1

Документация клэдитора гласит, что у него есть событие "change", которое, по его утверждению, работает с событием "keyup", но, к сожалению, в моем тестировании это не сработало так, как ожидалось с Firefox 7 (требуется щелчок из текстового редактора),

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

Код:

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

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

Существует также еще один вопрос Stackru, в котором задано то же самое, в котором пользователь Ling предлагает изменить плагин для добавления своей собственной функции: получить контент из jquery CLEditor

Изменить: на основе ваших комментариев с вышеупомянутым результатом вопроса SO не работает, я исправил код ниже. Это работает в IE9 и 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);
});

});

Другое редактирование: чтобы получить HTML, вы должны найти тело внутри iframe, как $(this).find("body").html(), Смотрите код ниже. 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

Так как я ответил на вопрос, который побудил вас к этому, я думаю, я отвечу и на этот вопрос;)

Это работает в 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

ОБНОВИТЬ

Это также работает в Chrome и Firefox. Может IE тоже?

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

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

jsFiddle