получать содержимое с помощью tinyMCE?

У меня есть текстовое поле tinyMCE #frmbody, и я использую его экземпляр jquery.

<textarea class="tinymce" name="frmbody" id="frmbody" cols="30" rows="20"></textarea>

Я пытаюсь получить содержимое текстового поля по мере ввода пользователем.

$("#frmbody").live('keyup', function(e) {
    alert("keyup");
});

Приведенный выше код не работает, и я не уверен, почему. Если я удалю экземпляр tinyMCE, приведенный выше код будет работать нормально. Любые идеи?


person Mike    schedule 27.03.2012    source источник
comment
Не знаю, но есть вероятность, что tinyMCE создает (или воссоздает) другую текстовую область, в которой вы на самом деле печатаете, поэтому #frmbody никогда не имеет какой-либо ключевой активности.   -  person Mikhail    schedule 27.03.2012
comment
Я тоже об этом думал. Буду копать и искать. Спасибо   -  person Mike    schedule 27.03.2012
comment
Единственная другая вещь, хотя, когда я проверяю значения $_POST, frmbody там.   -  person Mike    schedule 27.03.2012
comment
tinyMCE скрывает ваше текстовое поле и сам обрабатывает ввод текста. Когда форма публикуется, она копирует созданный HTML обратно в вашу текстовую область. Тем не менее, у него есть большое количество собственных событий, к которым вы можете подключиться.   -  person Dave    schedule 27.03.2012


Ответы (5)


Это связано с тем, что экземпляр TinyMCE не является настоящей текстовой областью, поэтому события нажатия клавиш не обнаруживаются. Вместо этого попробуйте обратный вызов onchange.

person Blazemonger    schedule 27.03.2012

Вы можете сделать собственный слушатель для tinyMCE: http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp

или напишите свой собственный и используйте встроенную функцию getContent: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

person autumncollection    schedule 27.03.2012

Можно просто получить содержимое редактора, используя:

tinymce.activeEditor.getContent();

Если вы хотите прикрепить событие onchange, согласно этой странице, http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor создайте редактор, используя следующий код:

var ed = new tinymce.Editor('textarea_id', { 
    init_setting_item: 1,
    ...
}, tinymce.EditorManager);

ed.on('change', function(e) {
    var content = ed.getContent();
    $("#textarea_id").val(content); // update the original textarea with the content
    console.log(content);
});

ed.render();

Обратите внимание, что onchange срабатывает, когда пользователь не фокусируется, нажимает ввод или нажимает кнопку на панели инструментов, а не каждое нажатие клавиши.

person Henry    schedule 08.06.2013

Очень легко написать собственный обработчик и назначить его документу iframe редактора. Существуют обработчики tinymce для различных событий, уже определенные, например keyUp.

Вот стандартный способ назначить собственный обработчик документу iframe редактора.

var my_handler = function(event) {
    alert('my handler fired!');
};

var ed = tinymce.get('my_editor_id');
$(ed.getDoc()).bind('keyup', my_handler);
person Thariama    schedule 28.03.2012

TinyMCE скрывает текстовую область и создает HTML-контейнер. Если вы пишете содержимое в поле, это iFrame с именем "TEXTAREANAME_ifr".

Итак, попробуйте следующее:

$("#frmbody_ifr").live('keyup', function(e) {
    alert("keyup");
});

Я думаю, как Тариама уже сказал, что EventHandler от TinyMCE будет лучшим способом.

person SG 86    schedule 28.03.2012