valore Get di TinyMCE textarea con selettore jQuery

voglio ottenere il valore di una textarea TinyMCEvalore Get di TinyMCE textarea con selettore jQuery

<textarea id="thetextarea"></textarea>

sulla chiave al fine di dargli da mangiare in uno script show-anteprima utilizzando:

function showPreview(value) { 

    $("#preview-container").load("/material-preview.php", {s:value}); 

} 
$('thetextarea').live("keyup",function (e) { 

     var material = this.value; 
     showPreview(material); 

     return false; 

    });

Se provo a selezionare il textarea id thetextarea non funziona (funziona se non lo faccio un campo di stagno).

con Firebug vedo che il testo, quando l'area di testo è TinyMCE-convertiti, si trova a:

<body id="tinymce" class="mceContentBody"></body>

ma questo non funziona neanche, (né $('#tinymce'))

$('mceContentBody').live("keyup",function (e) { 

      var material = this.value; 
      showPreview(material); 

      return false; 

     });

HTML codice (da firebug) dopo tinyMCE viene applicato come richiesto

<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>

fonte

2011-08-27 Joseph

risolto con l'aiuto di http://stackoverflow.com/questions/1024712/this-keyup-not-responding-when-focused-on-tinymce – Joseph

Il selettore è wr ong nell'esempio sopra. Dovrebbe essere:

$('#thetextarea').live("keyup",function (e) {

non

$('thetextarea').live("keyup",function (e) {

E 'solo un errore di battitura nella tua domanda?

Se non sei sicuro di quale elemento abbia il testo che ti serve, puoi provare ad aggiungere il gestore di eventi a entrambi gli elementi. Anche io penso che si dovrebbe usare $(this).val() vs. this.val:

$('#thetextarea, .mceContentBody').live("keyup",function (e) { 
    var material = $(this).val(); 
    showPreview(material); 
    return false; 
});

fonte

2011-08-27 11:27:30

@JJ che era un refuso nella domanda, ho anche cambiato in $ (this) .val() ma purtroppo non lo trova. – Joseph

L'evento keyup si attiva? Prova ad aggiungere 'alert ('evento licenziato');' per vedere se il tuo evento sta sparando. Se è così, devi solo recuperare il valore in modo diverso, magari tramite '$ ('. MceContentBody'). Val();' –

Non si attiva, quindi c'è qualcosa con il selettore. the tinymce trasforma la textarea in un iframe e inserisce il testo direttamente in ' ' questo causerà problemi al selettore jquery? – Joseph

Vedere il seguente link sul come definire l'evento onKeyUp di lavorare con TinyMCE:

http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp

In sostanza quando si inizializza TinyMCE voi definisci il tuo gestore di eventi onKeyUp. Penso che un normale selettore non funzionerà qui poiché il testo è all'interno di un iFrame separato. L'API TinyMCE elenca un metodo .getContent() che potrebbe funzionare. vale a dire. Qualcosa di simile a questo:

tinyMCE.init({ 
    setup : function(ed) { 
     ed.onKeyUp.add(function(ed, e) { 
      //showPreview ($('.mceContentBody').val()); 
      showPreview (tinyMCE.activeEditor.getContent({format : 'raw'})); 

     }); 
    } 
});

Vedi anche: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

Il tuo problema è più con TinyMCE di jQuery o Javascript specificamente. Se quanto sopra non funziona, dovrai leggere i documenti e/o le API di TinyMCE per capire come fare ciò che vuoi ottenere.

fonte

2011-08-27 14:34:57

TinyMCE fornisce jQuery pluggin che è possibile utilizzare in combinazione con il 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); 
    }); 
    } 
});

C'è anche un preview plugin, che ho il sospetto fa quello che tu fossi dopo più direttamente.

fonte

2012-10-20 21:14:41 acrosman

tinyMCE.get('yourTextAreaId').getContent();

fonte

2013-08-07 13:27:26

chiamata

tinyMCE.triggerSave();

dopo che sarete in grado di utilizzare il selettore jQuery

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

fonte

2013-09-06 16:57:01

impressionante! grazie. – Cody

accetta questa risposta @Cody –

È possibile utilizzare anche questo.

tinyMCE.activeEditor.getContent();

fonte

2016-04-04 13:25:47

tinymce.innerHTML mi dà risultato desiderato

fonte

2016-07-28 11:13:20

valore Get di TinyMCE textarea con selettore jQuery

risposta

Problemi correlati