giá trị Nhận của TinyMCE textarea với selector jquery

Tôi muốn nhận được giá trị của một textarea TinyMCEgiá trị Nhận của TinyMCE textarea với selector jquery

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

trên chìa khóa lên để nuôi nó thành một kịch bản show-preview sử dụng:

function showPreview(value) { 

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

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

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

     return false; 

    });

Nếu tôi cố gắng chọn id văn bản thetextarea nó không hoạt động (hoạt động nếu tôi không làm cho nó một trường tinymce).

với firebug tôi thấy rằng các văn bản, khi textarea là TinyMCE-chuyển đổi, là:

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

nhưng điều này không làm việc, hoặc, (cũng không $('#tinymce'))

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

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

      return false; 

     });

HTML mã (từ firebug) sau tinyMCE được áp dụng theo yêu cầu

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

Nguồn

2011-08-27 Joseph

Giải quyết nó với sự giúp đỡ của http://stackoverflow.com/questions/1024712/this-keyup-not-responding-when-focused-on-tinymce – Joseph

Bộ chọn của bạn là wr ong trong ví dụ trên. Nó nên là:

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

không

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

Đây có phải là chỉ là một lỗi đánh máy trong câu hỏi của bạn?

Nếu bạn không chắc chắn phần tử nào có văn bản bạn cần, bạn có thể thử thêm trình xử lý sự kiện của mình cho cả hai phần tử. Ngoài ra tôi nghĩ rằng bạn nên sử dụng $(this).val() vs this.val:

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

Nguồn

2011-08-27 11:27:30

@JJ đó là một lỗi đánh máy trong câu hỏi, tôi cũng đã thay đổi thành $ (this) .val() nhưng nó không tìm thấy nó không may. – Joseph

Sự kiện khóa có kích hoạt không? Hãy thử thêm 'alert ('event fired');' để xem sự kiện của bạn có đang kích hoạt hay không. Nếu vậy bạn chỉ cần lấy giá trị khác nhau - có lẽ thông qua '$ ('. MceContentBody'). Val();' –

Nó không cháy để có cái gì đó với bộ chọn. các tinymce làm cho textarea vào một khung nội tuyến và đặt văn bản trực tiếp bên trong ' ' sẽ gây ra bất kỳ vấn đề cho bộ chọn jquery? – Joseph

Xem các liên kết sau đây về cách xác định sự kiện onKeyUp để làm việc với TinyMCE:

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

Về cơ bản khi bạn khởi TinyMCE bạn xác định trình xử lý sự kiện onKeyUp của bạn. Tôi nghĩ rằng một bộ chọn thông thường sẽ không hoạt động ở đây vì văn bản nằm bên trong một iFrame riêng biệt. API TinyMCE liệt kê một phương thức .getContent() có thể hoạt động. I E. Một cái gì đó như thế này:

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

     }); 
    } 
});

Xem thêm: http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

Vấn đề của bạn là nhiều hơn với TinyMCE hơn jQuery hoặc Javascript cụ thể. Nếu những điều trên không hiệu quả, bạn cần đọc tài liệu và/hoặc API TinyMCE để tìm hiểu cách thực hiện những gì bạn muốn đạt được.

Nguồn

2011-08-27 14:34:57

TinyMCE cung cấp một jQuery pluggin mà bạn có thể sử dụng kết hợp với các 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); 
    }); 
    } 
});

Ngoài ra còn có một preview plugin, mà tôi nghi ngờ những gì bạn đang theo đuổi cách trực tiếp hơn.

Nguồn

2012-10-20 21:14:41 acrosman

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

Nguồn

2013-08-07 13:27:26

Gọi

tinyMCE.triggerSave();

sau đó bạn sẽ có thể sử dụng jquery selector

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

Nguồn

2013-09-06 16:57:01

tuyệt vời! cảm ơn bạn. – Cody

chấp nhận câu trả lời này @Cody –

Bạn có thể sử dụng điều này quá.

tinyMCE.activeEditor.getContent();

Nguồn

2016-04-04 13:25:47

tinymce.innerHTML mang lại cho tôi kết quả yêu cầu

Nguồn

2016-07-28 11:13:20

giá trị Nhận của TinyMCE textarea với selector jquery

Trả lời

Các vấn đề liên quan