valor Get del área de texto tinymce con selector de jQuery

Quiero obtener el valor de un área de texto tinymcevalor Get del área de texto tinymce con selector de jQuery

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

en clave con el fin de alimentar en un guión presentas vista previa usando:

function showPreview(value) { 

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

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

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

     return false; 

    });

Si trato de seleccionar el ID de área de texto thetextarea, no funciona (funciona si no lo hago como un campo de tinymce).

con Firebug veo que el texto, cuando el área de texto es tinymce convertida, se encuentra en:

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

pero esto tampoco funciona, (tampoco $('#tinymce'))

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

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

      return false; 

     });

HTML código (de firebug) después de aplicar tinyMCE según lo solicitado

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

Fuente

2011-08-27 Joseph

lo resolvió con la ayuda de http://stackoverflow.com/questions/1024712/this-keyup-not-responding-when-focused-on-tinymce – Joseph

Su selector es wr ong en el ejemplo anterior. Debería ser:

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

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

se trata simplemente de un error tipográfico en su pregunta?

Si no está seguro de qué elemento tiene el texto que necesita, puede intentar agregar su controlador de eventos a ambos elementos. También pienso que usted debe utilizar $(this).val() vs this.val:

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

Fuente

2011-08-27 11:27:30

@JJ que era un error tipográfico en la pregunta, también cambié a $ (this) .val() pero no lo encuentro desafortunadamente. – Joseph

¿Se disparó el evento keyup? Intente agregar 'alerta ('evento disparado');' para ver si su evento se está disparando. Si es así, solo tiene que recuperar el valor de forma diferente, quizás mediante '$ ('. MceContentBody'). Val();' –

No se activa, por lo que hay algo con el selector. el tinymce convierte el área de texto en un iframe y coloca el texto directamente dentro de ' ' ¿eso causará algún problema para el selector jquery? – Joseph

Véase el siguiente enlace sobre cómo definir el evento onKeyUp trabajar con TinyMCE:

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

Esencialmente al inicializar TinyMCE se define tu controlador de eventos onKeyUp. Creo que un selector regular no funcionará aquí ya que el texto está dentro de un iFrame separado. La API TinyMCE enumera un método .getContent() que puede funcionar. es decir. Algo como esto:

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

     }); 
    } 
});

Véase también: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

Su problema es más con TinyMCE de jQuery o JavaScript específicamente. Si lo anterior no funciona, deberá leer los documentos de TinyMCE y/o la API para descubrir cómo hacer lo que desea lograr.

Fuente

2011-08-27 14:34:57

TinyMCE proporciona una jQuery pluggin que se puede utilizar en conjunción con el 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); 
    }); 
    } 
});

También hay un preview plugin, que sospecho que hace lo que fueron después de forma más directa.

Fuente

2012-10-20 21:14:41 acrosman

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

Fuente

2013-08-07 13:27:26

llamada

tinyMCE.triggerSave();

después de que usted será capaz de utilizar el selector de jQuery

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

Fuente

2013-09-06 16:57:01

¡increíble! gracias. – Cody

acepta esta respuesta @Cody –

Puede utilizar este también.

tinyMCE.activeEditor.getContent();

Fuente

2016-04-04 13:25:47

tinymce.innerHTML me da resultado requerido

Fuente

2016-07-28 11:13:20

valor Get del área de texto tinymce con selector de jQuery

Respuesta

Cuestiones relacionadas