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

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

9 голосов
/ 23 октября 2011

Я пытаюсь ответить на предыдущий вопрос Stackoverflow о том, как отображать содержимое из текстового поля 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 для этой цели, и я надеюсь, что кто-то сможет пролить свет на эту тему.

Ответы [ 2 ]

13 голосов
/ 23 октября 2011

Документация Cleditor заявляет, что у него есть событие «change», которое, как утверждается, работает с событием «keyup», но, к сожалению, в моем тестировании это не сработало так, как ожидалось с Firefox 7 (требуется щелчок по тексту-редактор.изменив плагин, добавив свою собственную функцию: Получить контент из jquery CLEditor

Редактировать: на основе ваших комментариев с таким результатом вопроса вопрос не работает, я исправил код ниже.Это работает в 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);
});
0 голосов
/ 23 октября 2011

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

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

UPDATE

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

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

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

jsFiddle

...