TinyMCE: Làm thế nào ràng buộc về sự kiện sau khi nó khởi

Question

tôi đã tìm kiếm rất nhiều nhưng bởi ing google-fu' không làm cho tôi bất kỳ kết quả :(

Tôi đã một đã khởi tinyMCE biên tập mà quá trình khởi tạo I không thể kiểm soát, do đó, mã như sau không làm việc ở tất cả:

tinyMCE.init({ 
    ... 
    setup : function(ed) { 
      ed.onChange.add(function(ed, l) { 
        console.debug('Editor contents was modified. Contents: ' + l.content); 
      }); 
    } 
}); 

mã như sau không hoạt động hoặc kể từ khi TinyMCE jQuery plugin không được định nghĩa:

$('textarea').tinymce({ 
    setup: function(ed) { 
     ed.onClick.add(function(ed, e) { 
      alert('Editor was clicked: ' + e.target.nodeName); 
     }); 
    } 
}); 

Ý tôi là, nó phải sử dụng cú pháp tinymce.something.

Làm cách nào để liên kết hàm gọi lại với bất kỳ sự kiện tinyMCE nào sau khi tinyMCE đã được khởi tạo?

Answer 1

Sau khi xâm nhập vào đối tượng TinyMCE với console.log(), tôi tìm thấy một giải pháp làm việc:

setTimeout(function() { 
     for (var i = 0; i < tinymce.editors.length; i++) { 
      tinymce.editors[i].onChange.add(function (ed, e) { 
      // Update HTML view textarea (that is the one used to send the data to server). 
     ed.save(); 
     }); 
      } 
}, 1000); 

Bên trong đó hàm callback người ta có thể thiết lập các sự kiện bất cứ điều gì ràng buộc ai muốn.

Cuộc gọi setTimeout là để khắc phục tình trạng đua của tinymce và jQuery, vì khi cuộc gọi đến tinymce.editors[i].onChange.add() được thực hiện thì không được khởi tạo.

Answer 2

Mặc dù bài đăng này đã cũ nhưng tôi nghĩ người khác sẽ cần câu trả lời này. Tôi đã cùng một vấn đề và sửa chữa nó tôi đã làm điều này:

tinyMCE.init({ 
     ... 
     init_instance_callback : "myCustomInitInstance" 
}); 

Dựa trên http://www.tinymce.com/wiki.php/Configuration3x:init_instance_callback

Answer 3

EDIT: oops - Tôi nghĩ đây là một câu hỏi tôi đã nhìn vào đó là đặc trưng cho WordPress + TinyMCE, đoán là không. Mặc dù tôi sẽ để lại câu trả lời ở đây vì nó có thể hữu ích cho người khác.

Cách thích hợp để thực hiện việc này sẽ là nối thêm vào init TinyCE với bộ lọc WordPress. Ví dụ:

PHP (trong functions.php hoặc địa điểm khác đó là chạy trên tải chỉnh sửa trang):

add_action('init', 'register_scripts');  
    function register_scripts(){ 
    if (is_admin()) { 
     wp_register_script(
     'admin-script', 
     get_stylesheet_directory_uri() . "/js/admin/admin.js", 
     array('jquery'), 
     false, 
     true 
    ); 
    } 
    } 

    add_action('admin_enqueue_scripts', 'print_admin_scripts'); 
    function print_admin_scripts() {   
    wp_enqueue_script('admin-script'); 
    } 

    add_filter('tiny_mce_before_init', 'my_tinymce_setup_function'); 
    function my_tinymce_setup_function($initArray) { 
    $initArray['setup'] = 'function(ed){ 
     ed.onChange.add(function(ed, l) { 
     tinyOnChange(ed,l); 
     }); 
    }'; 
    return $initArray; 
    } 

JavaScript (/js/admin/admin.js)

(function($){ 
    window.tinyOnChange = function(ed, l){   
     console.log('Editor contents was modified. Contents: ' + l.content);  
    } 
    }(jQuery); 

Điều này được kiểm tra và làm việc trong WordPress 3.9 (mặc dù tôi đơn giản nhận được kết quả đầu ra của bàn điều khiển:

Deprecated TinyMCE API call: <target>.onChange.add(..) 

Nhưng đó là do tinyM Mã không dùng nữa của CE bạn đang cố gắng sử dụng. Phương pháp này vẫn hoạt động để sửa đổi bất kỳ tùy chọn init nhỏ nàoMCE - Tôi hiện đang sử dụng nó cho init_instance_callback và nó hoạt động rất tốt.

-Thomas

Answer 4

Trong TinyMCE 4, onChange không tồn tại.Bạn phải sử dụng:

tinymce.get('myeditorname').on("change", function() { alert("stuff"); }); 

Answer 5

Đây là giải pháp của tôi cho ràng buộc sự kiện cho một hoặc nhiều textareas bất cứ lúc nào, do mã này được gắn sau bao gồm cả TinyMCE tập tin javascript vào trang của bạn. (Nói cách khác, điều duy nhất cần thiết để làm việc này, là sự tồn tại của biến 'TinyMCE')

// Loop already initialised editors 
for(id in tinymce.editors){ 
    if(id.trim()){ 
     elementReady(id); 
    } 
} 

// Wait for non-initialised editors to initialise 
tinymce.on('AddEditor', function (e) { 
    elementReady(e.editor.id); 
}); 

// function to call when tinymce-editor has initialised 
function elementReady(editor_id){ 

    // get tinymce editor based on instance-id 
    var _editor = tinymce.editors[editor_id]; 

    // bind the following event(s) 
    _editor.on("change", function(e){ 

     // execute code 
    }); 
} 

Lưu ý rằng các sự kiện 'thay đổi' không bị ràng buộc để luôn kích hoạt ngay lập tức sau khi một cái gì đó thay đổi. According to the documentation, nó "bị sa thải khi thay đổi được thực hiện bên trong trình chỉnh sửa gây ra một mức hoàn tác được thêm vào." Theo kinh nghiệm của tôi, không phải lúc nào cũng xảy ra khi bạn mong đợi nó xảy ra.

Một cách để khắc phục điều này là liên kết nhiều sự kiện, chẳng hạn như 'thay đổi đầu vào', tuy nhiên, sẽ có một số trùng lặp, sau đó sẽ được lọc.