2011-08-27 127 views
21

我希望得到一個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; 

    }); 

如果我嘗試選擇文本區號thetextarea它不起作用(如果我不使它成爲tinymce字段,則工作)。

與螢火我看到文本,當textarea的是TinyMCE的轉換,表現在:

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

但這也不管用,(也不$('#tinymce')

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

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

      return false; 

     }); 

HTML代碼(從螢火蟲)按照要求應用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> 
+0

與http://stackoverflow.com/questions/1024712/this-keyup-not-responding-when-focused-on-tinymce – Joseph

回答

0

您的選擇器是wr在上面的例子中。它應該是:

$('#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在這個問題上是一個錯字,我也改爲$(this).val(),但不幸的是它找不到它。 – Joseph

+0

關鍵事件是否觸發?嘗試添加alert('event fired');'以查看您的事件是否正在觸發。如果是這樣,你只需要不同的檢索值 - 也許通過'$('。mceContentBody')。val();' –

+0

它不會觸發,所以有選擇器的東西。 tinymce使textarea成爲一個iframe,並將文本直接放在' '這會導致jquery選擇器出現任何問題嗎? – Joseph

3

參見如何定義onkeyup事件以下鏈接與TinyMCE的工作:當你初始化TinyMCE的你

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

本質定義你的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

你的問題更與TinyMCE的jQuery的比或Javascript明確。如果上述操作不起作用,您需要閱讀TinyMCE文檔和/或API以瞭解如何執行您想要的操作。

2

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,我懷疑你做什麼都更直接了。

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

呼叫

tinyMCE.triggerSave(); 

之後,你就可以使用jQuery選擇

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

真棒!謝謝。 – Cody

+0

接受這個答案@Cody –

1

您可以使用這一點。

tinyMCE.activeEditor.getContent();

0

tinymce.innerHTML給了我需要的結果