我想得到一个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;
});
如果我尝试选择textarea id thetextarea
它不起作用(如果我不使它成为一个tinymce字段,则有效)。
使用firebug我看到文本,当textarea被tinymce转换时,在:
<body id="tinymce" class="mceContentBody"></body>
但这也不起作用,($('#tinymce')
)
$('mceContentBody').live("keyup",function (e) {
var material = this.value;
showPreview(material);
return false;
});
按照要求应用tinyMCE后的HTML代码(来自firebug)
<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>
答案 0 :(得分:58)
呼叫
tinyMCE.triggerSave();
之后你就可以使用jquery选择器
了$("#yourtextareaID").val();
答案 1 :(得分:14)
tinyMCE.get('yourTextAreaId').getContent();
答案 2 :(得分:3)
请参阅以下链接,了解如何定义onKeyUp事件以使用TinyMCE:
http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp
基本上,在初始化tinyMCE时,您需要定义onKeyUp事件处理程序。我认为常规选择器在这里不起作用,因为文本在单独的iFrame中。 TinyMCE API列出了可能有效的方法.getContent()
。即。像这样:
tinyMCE.init({
setup : function(ed) {
ed.onKeyUp.add(function(ed, e) {
//showPreview ( $('.mceContentBody').val() );
showPreview (tinyMCE.activeEditor.getContent({format : 'raw'}) );
});
}
});
另见: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent
你的问题更多的是TinyMCE而不是jQuery或Javascript。如果上述方法不起作用,您需要阅读TinyMCE文档和/或API,以了解如何实现您想要实现的目标。
答案 3 :(得分:2)
TinyMCE提供jQuery pluggin,您可以将其与onKeyUp command in the 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);
});
}
});
还有一个preview plugin,我怀疑你更直接地做了什么。
答案 4 :(得分:2)
您也可以使用它。
tinyMCE.activeEditor.getContent();
答案 5 :(得分:0)
上面的示例中的选择器错误。它应该是:
$('#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;
});
答案 6 :(得分:0)
tinymce.innerHTML
为我提供了必要的结果
答案 7 :(得分:0)
//Html text editor text code
<textarea name="description" class="tinymce" id="texteditor"></textarea>
You can print tinymce text editor code using java script like this.
var content = tinymce.get("texteditor").getContent();
alert(descriptionFieldTxt);
//output
[enter image description here][1]
[enter image description here][2]
//output with tags
enter image description here
//Now you can print tinymce texteditor value without p tag like this
var content = tinymce.get("texteditor").getContent({format: "text"});
alert(descriptionFieldTxt);
enter code here
This code print text without tags
[enter image description here][3]
[1]: https://i.stack.imgur.com/DgKYg.png
[2]: https://i.stack.imgur.com/Tb1uf.png
[3]: https://i.stack.imgur.com/Ahf60.png