JQuery Cleditor получить значение текстовой области по ключу

Question

Я использую Cleditor http://premiumsoftware.net/cleditor/docs/GettingStarted.html. Я хочу получить значение keyup и вставить текст в другой div. cleditor поставляется с событием change(), которое я сейчас использую в приведенном ниже примере с jsfiddle, но это не то же самое, что keyup. Я хочу, чтобы div обновлялся по мере ввода. Я пробовал keyup, но он не работает.

Вот что у меня сейчас

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

Проверьте jsfiddle http://jsfiddle.net/qm4G6/11/

Answer 1

Похоже, что cleditor прячет textarea и заменяет его iframe (см. строку 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);
})