Get value of tinymce textarea with jquery selector

Joseph picture Joseph · Aug 27, 2011 · Viewed 41.5k times · Source

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>

Answer

Vladimir Miroshnichenko picture Vladimir Miroshnichenko · Sep 6, 2013

Call

tinyMCE.triggerSave();

after that you'll be able to use jquery selector

$("#yourtextareaID").val();