使用 jquery 选择器获取 tinymce textarea 的值答案

【问题标题】：Get value of tinymce textarea with jquery selector使用 jquery 选择器获取 tinymce textarea 的值
【发布时间】：2011-11-05 01:35:20
【问题描述】：

我想获取tinymce textarea的值

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

打开键以便将其输入到显示预览脚本中，使用：

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 字段则有效）。

使用萤火虫我看到文本，当 textarea 被 tinymce-converted 时，在：

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

但这也不起作用，（$('#tinymce') 也不起作用）

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

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

            return false;

        });

根据要求应用 tinyMCE 后的 HTML 代码（来自 firebug）

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

【问题讨论】：

在stackoverflow.com/questions/1024712/…的帮助下解决了这个问题

标签： jquery-selectors tinymce

【解决方案1】：

//Html text editor text code

 <textarea name="description" class="tinymce" id="texteditor"></textarea>

You can print tinymce text editor code using java script like this.

var content = tinymce.get("texteditor").getContent();
alert(descriptionFieldTxt);

//output
[enter image description here][1]

[enter image description here][2]
//output with tags
enter image description here

//Now you can print tinymce texteditor value without p tag like this
var content = tinymce.get("texteditor").getContent({format: "text"});
alert(descriptionFieldTxt);

    enter code here

This code print text without tags
[enter image description here][3]


  [1]: https://i.stack.imgur.com/DgKYg.png
  [2]: https://i.stack.imgur.com/Tb1uf.png
  [3]: https://i.stack.imgur.com/Ahf60.png

【讨论】：

【解决方案2】：

tinymce.innerHTML 给了我所需的结果

【讨论】：

【解决方案3】：

打电话

tinyMCE.triggerSave();

之后你就可以使用 jquery 选择器了

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

【讨论】：

在TinyMCE 4中我们不需要添加这个但是在5中我们需要添加，你能告诉原因，谢谢

【解决方案4】：

你也可以用这个。

tinyMCE.activeEditor.getContent();

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

TinyMCE 提供了一个jQuery pluggin，您可以将它与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);
   });
  }
});

还有一个preview plugin,，我怀疑它更直接地完成了你所追求的。

【讨论】：

【解决方案7】：

有关如何定义 onKeyUp 事件以使用 TinyMCE，请参阅以下链接：

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

基本上，当您初始化 tinyMCE 时，您会定义 onKeyUp 事件处理程序。我认为常规选择器在这里不起作用，因为文本位于单独的 iFrame 内。 TinyMCE API 列出了一个可能有效的方法.getContent()。 IE。像这样的：

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

您的问题更多是 TinyMCE，而不是 jQuery 或 Javascript。如果上述方法不起作用，您需要阅读 TinyMCE 文档和/或 API 以了解如何实现您想要实现的目标。

【讨论】：

【解决方案8】：

您的选择器在上面的示例中是错误的。应该是：

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

【讨论】：

@JJ 这是问题中的一个错字，我也改为 $(this).val() 但不幸的是它没有找到它。
keyup 事件是否触发？尝试添加 alert('event fired'); 以查看您的事件是否正在触发。如果是这样，您只需要以不同的方式检索值 - 也许通过 $('.mceContentBody').val();
它不会触发，所以选择器有问题。 tinymce 将 textarea 制作成 iframe 并将文本直接放入 <body id="tinymce" class="mceContentBody"></body> 这会导致 jquery 选择器出现任何问题吗？
在应用 TinyMCE 后发布 html 代码（来自 firebug）。