Получить значение tinymce textarea с помощью jquery selector
Я хочу получить значение tinymce textarea
<textarea id="thetextarea"></textarea>
on key up, чтобы скормить его в скрипт show-preview, используя:
function showPreview(value) {
$("#preview-container").load("/material-preview.php", {s:value});
}
$('thetextarea').live("keyup",function (e) {
var material = this.value;
showPreview(material);
return false;
});
Если я попытаюсь выбрать идентификатор тексттареи thetextarea, это не сработает (работает, если я не сделаю его tinymce-полем).
с помощью firebug я вижу, что текст, когда текстовое поле преобразуется в tinymce, находится внутри:
<body id="tinymce" class="mceContentBody"></body>
, но это тоже не работает (также как и $('#tinymce'))
$('mceContentBody').live("keyup",function (e) {
var material = this.value;
showPreview(material);
return false;
});
HTML код (из firebug) после применения tinyMCE по запросу
<textarea id="material-input" class="mceEditor text" style="width: 310px ! important; height: 250px ! important; display: none;" name="material" aria-hidden="true"></textarea>
<span id="material-input_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="material-input_voice">
<span id="material-input_voice" class="mceVoiceLabel" style="display:none;">Rich Text Area</span>
<table id="material-input_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 310px; height: 250px;">
<tbody>
<tr class="mceFirst" role="presentation">
<tr>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="material-input_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text Area. Press ALT F10 for toolbar. Press ALT 0 for help." style="width: 100%; height: 206px;">
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<body id="tinymce" class="mceContentBody " contenteditable="true" spellcheck="false" dir="ltr">
<!-- the text inside tinymce textarea -->
</body>
</iframe>
</td>
</tr>
<tr class="mceLast">
</tbody>
</table>
</span>
3 ответа
Ваш выбор неправильный в приведенном выше примере. Это должно быть:
$('#thetextarea').live("keyup",function (e) {
не
$('thetextarea').live("keyup",function (e) {
Это просто опечатка в вашем вопросе?
Если вы не уверены, какой элемент имеет текст, который вы нужно, вы можете попробовать добавить свой обработчик событий для обоих элементов. Также я думаю, что вы должны использовать $(this).val() против this.val:
$('#thetextarea, .mceContentBody').live("keyup",function (e) {
var material = $(this).val();
showPreview(material);
return false;
});
TinyMCE предоставляет плагин jQuery , который можно использовать вместе с командой onKeyUp в API
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url : 'path/to/tiny_mce.js',
theme : "simple",
setup : function(ed) {
ed.onKeyUp.add(function(ed, l) {
console.debug('Key up event: ' + e.keyCode);
});
}
});
. Также имеется предварительный просмотр . плагин, который, как я подозреваю, делает то, что вы хотели, более непосредственно.