{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 地球回转人心会变 的问题《Get value of tinymce textarea with jquery selector》','https://www.manongdao.com/q-1209068.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I want to get the value of a tinymce textarea
<textarea id="thetextarea"></textarea>
on key up in order to feed it into a show-preview script using:
function showPreview(value) {
$("#preview-container").load("/material-preview.php", {s:value});
}
$('thetextarea').live("keyup",function (e) {
var material = this.value;
showPreview(material);
return false;
});
If I try to select the textarea id thetextarea it doesnt work (works if I dont make it an tinymce-field).
with firebug I see that the text, when the textarea is tinymce-converted, is in:
<body id="tinymce" class="mceContentBody"></body>
but this does not work either, (nor does $('#tinymce'))
$('mceContentBody').live("keyup",function (e) {
var material = this.value;
showPreview(material);
return false;
});
HTML code (from firebug) after tinyMCE is applied as requested
<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>
tinymce.innerHTMLgives me required resultTinyMCE provides a jQuery pluggin that you can use in conjunction with the onKeyUp command in the API
There is also a preview plugin, which I suspect does what you were after more directly.
See the following link on how to define the onKeyUp event to work with TinyMCE:
http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp
Essentially when you initialize tinyMCE you define your onKeyUp event handler. I think a regular selector won't work here since the text is inside a separate iFrame. The TinyMCE API lists a method
.getContent()that may work. ie. Something like this:Also see: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent
Your problem is more with TinyMCE than jQuery or Javascript specifically. If the above doesn't work you'll need to read the TinyMCE docs and/or API to figure out how to do what you want to achieve.
Your selector is wrong in the example above. It should be:
not
Is this just a typo in your question?
If you're not sure which element has the text you need, you can try adding your event handler to both elements. Also I think you should be using
$(this).val()vs.this.val:Call
after that you'll be able to use jquery selector