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

发布于 2024-12-01 11:15:57 字数 2382 浏览 1 评论 0原文

我想在按键上获取tinymce文本区域的值

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

    });

如果我尝试选择文本区域id thetextarea 它不起作用（如果我不这样做，则有效使其成为一个tinymce字段）。

使用firebug，当文本区域进行tinymce转换时，我看到文本位于：

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

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

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

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

            return false;

        });

HTML代码（来自firebug）按要求应用tinyMCE后

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

原文

I want to get the value of a tinymce textarea

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

on key up in order to feed it into a show-preview script using:

function showPreview(value) {

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

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

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

        return false;

    });

If I try to select the textarea id thetextarea it doesnt work (works if I dont make it an tinymce-field).

with firebug I see that the text, when the textarea is tinymce-converted, is in:

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

but this does not work either, (nor does $('#tinymce'))

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

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

            return false;

        });

HTML code (from firebug) after tinyMCE is applied as requested

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

把昨日还给我 2024-12-08 11:15:57

之后调用

tinyMCE.triggerSave();

你就可以使用jquery选择器了

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

Call

tinyMCE.triggerSave();

after that you'll be able to use jquery selector

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

回复收藏 0 原文

伴我老 2024-12-08 11:15:57

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

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

回复收藏 0 原文

无悔心 2024-12-08 11:15:57

请参阅以下链接，了解如何定义 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 来弄清楚如何实现您想要实现的目标。

See the following link on how to define the onKeyUp event to work with TinyMCE:

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

Essentially when you initialize tinyMCE you define your onKeyUp event handler. I think a regular selector won't work here since the text is inside a separate iFrame. The TinyMCE API lists a method .getContent() that may work. ie. Something like this:

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

      });
   }
});

Also see:
http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

Your problem is more with TinyMCE than jQuery or Javascript specifically. If the above doesn't work you'll need to read the TinyMCE docs and/or API to figure out how to do what you want to achieve.

回复收藏 0 原文

允世 2024-12-08 11:15:57

你也可以使用这个。

tinyMCE.activeEditor.getContent();

回复收藏 0 原文

疏忽 2024-12-08 11:15:57

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);
   });
  }
});

还有一个预览插件，我怀疑它可以更直接地实现您的需求。

TinyMCE provides a jQuery pluggin that you can use in conjunction with the 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);
   });
  }
});

There is also a preview plugin, which I suspect does what you were after more directly.

回复收藏 0 原文

红玫瑰 2024-12-08 11:15:57

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

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

Your selector is wrong in the example above. It should be:

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

not

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

Is this just a typo in your question?

If you're not sure which element has the text you need, you can try adding your event handler to both elements. Also I think you should be using $(this).val() vs. this.val:

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

回复收藏 0 原文

输什么也不输骨气 2024-12-08 11:15:57

tinymce.innerHTML 给了我所需的结果

回复收藏 0 原文

寄离 2024-12-08 11:15:57

//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.sstatic.net/DgKYg.png
  [2]: https://i.sstatic.net/Tb1uf.png
  [3]: https://i.sstatic.net/Ahf60.png

//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.sstatic.net/DgKYg.png
  [2]: https://i.sstatic.net/Tb1uf.png
  [3]: https://i.sstatic.net/Ahf60.png

回复收藏 0 原文

~没有更多了~