web-dev-qa-db-fra.com

Récupère la valeur de tinymce textarea avec le sélecteur jQuery

Je veux obtenir la valeur d'un tinymce textarea

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

sur key up afin de l'insérer dans un script show-preview en utilisant:

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 j'essaie de sélectionner l'id textarea thetextarea, cela ne fonctionnera pas (fonctionne si je n'en fais pas un champ tinymce).

avec firebug, je vois que le texte, lorsque le textarea est converti au minimum, se trouve dans:

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

mais cela ne fonctionne pas non plus (ni $('#tinymce'))

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

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

            return false;

        });

Code HTML (de firebug) après l'application de tinyMCE à la demande

 <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>
jquery-selectorstinymce
22
Joseph

Appel

tinyMCE.triggerSave();

après cela, vous pourrez utiliser le sélecteur jQuery

$("#yourtextareaID").val();
54
Vladimir Miroshnichenko
tinyMCE.get('yourTextAreaId').getContent();
11
user2188149

Voir le lien suivant pour savoir comment définir l'événement onKeyUp à utiliser avec TinyMCE:

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

Lorsque vous initialisez tinyMCE, vous définissez essentiellement votre gestionnaire d’événements onKeyUp. Je pense qu'un sélecteur standard ne fonctionnera pas ici car le texte se trouve dans un iFrame séparé. L'API TinyMCE répertorie une méthode .getContent() susceptible de fonctionner. c'est à dire. Quelque chose comme ça:

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

      });
   }
});

Voir aussi: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

Votre problème concerne davantage TinyMCE que jQuery ou Javascript en particulier. Si ce qui précède ne fonctionne pas, vous devez lire la documentation et/ou l'API TinyMCE pour savoir comment faire ce que vous voulez.

3
JJ.

TinyMCE fournit un jQuery pluggin que vous pouvez utiliser conjointement avec la commande onKeyUp dans l'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);
   });
  }
});

Il y a aussi un plugin preview, qui, je suppose, fait ce que vous cherchiez plus directement.

2
acrosman

Votre sélecteur est faux dans l'exemple ci-dessus. CA devrait etre:

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

ne pas

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

Est-ce juste une faute de frappe dans votre question?

Si vous ne savez pas quel élément contient le texte dont vous avez besoin, vous pouvez essayer d'ajouter votre gestionnaire d'événements aux deux éléments. Aussi, je pense que vous devriez utiliser $(this).val() contre this.val:

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

tinymce.innerHTML me donne le résultat requis

0
Irfan Ashraf