web-dev-qa-db-ja.com

jqueryセレクターでtinymce textareaの値を取得する

Tinymceテキストエリアの値を取得したい

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

次のコマンドを使用してshow-previewスクリプトにフィードするために、キーを押します。

_function showPreview(value) {

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

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

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

        return false;

    });
_

Textarea id thetextareaを選択しようとしても機能しません（tinymceフィールドにしないと機能します）。

firebugを使用すると、textareaがtinymceに変換されたときに、テキストが次の場所にあることがわかります。

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

しかし、これも機能しません（または$('#tinymce')）も機能しません）

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

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

            return false;

        });
_

TinyMCEが要求通りに適用された後の（firebugからの）HTMLコード

_ <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
26
Joseph

コール

tinyMCE.triggerSave();

その後、jqueryセレクターを使用できるようになります

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

TinyMCEで動作するようにonKeyUpイベントを定義する方法については、次のリンクを参照してください。

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

基本的に、tinyMCEを初期化するときに、onKeyUpイベントハンドラーを定義します。テキストが別のiFrame内にあるため、ここでは通常のセレクターは機能しないと思います。 TinyMCE APIは、機能する可能性のあるメソッド.getContent()をリストします。すなわち。このようなもの：

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

      });
   }
});

以下も参照してください： http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

あなたの問題は、特にjQueryやJavaScriptよりもTinyMCEの方が多くなっています。上記が機能しない場合は、TinyMCEのドキュメントやAPIを読んで、達成したいことを行う方法を理解する必要があります。

3
JJ.

これも使えます。

tinyMCE.activeEditor.getContent();

2
Gaurang Ghinaiya

TinyMCEが提供する jQueryプラグイン これは、APIの onKeyUpコマンドと組み合わせて使用​​できます

$('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);
   });
  }
});

プレビュープラグイン もあります。これは、あなたが求めていたことをより直接的に実行しているのではないかと思います。

2
acrosman

上記の例では、セレクターが間違っています。そのはず：

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

ない

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

これはあなたの質問の単なるタイプミスですか？

どの要素に必要なテキストがあるかわからない場合は、両方の要素にイベントハンドラーを追加してみてください。また、$(this).val()と_this.val_を使用する必要があると思います。

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

tinymce.innerHTML必要な結果が得られます

0
Irfan Ashraf