TinyMCE的：如何後事件綁定其初始化

我已經搜索了很多，但通過谷歌福「ING不要誤會我的任何結果:(TinyMCE的：如何後事件綁定其初始化

我有一個已經初始化tinyMCE編輯器，初始化過程中，我無法控制，所以像下面的代碼不會在所有的工作：像

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

以下代碼無法正常工作或因爲jQuery的在TinyMCE插件沒有定義：

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

我的意思是，它必須使用tinymce.something語法。

在tinyMCE已經初始化後，如何將回調函數綁定到任何tinyMCE事件？

來源

2013-08-29 diosney

侵入TinyMCE的物體的console.log（）後，我發現了一個工作液：

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

內部的回調函數可以設置任何事件綁定一個希望。

setTimeout呼叫是爲了克服tinymce和jQuery的競速條件，因爲當呼叫tinymce.editors[i].onChange.add()時，tinymce尚未初始化。

來源

2013-08-29 16:22:06 diosney

在我的實現中，這個代碼是90％的解決方案，但它仍然給我警告「已棄用的TinyMCE API調用： .onChange.add（...）」 - 剩下的10％是修復程序用on（'change'，function（）{}）替換onChange.add（function（）{}） - 就像Ed Zavade在下面提出的那樣。 –

儘管這篇文章已經很老了，但我認爲其他人會需要這個答案。我有同樣的問題，並解決它，我這樣做：

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

基於http://www.tinymce.com/wiki.php/Configuration3x:init_instance_callback

來源

2014-01-20 16:11:01 Luci

更新鏈接 – rohanagarwal

編輯：哎呀 - 我認爲這是另外一個問題我一直在尋找，這是具體到WordPress + TinyMCE的，可能不會。雖然我會在這裏留下答案，因爲這可能對他人有幫助。

這樣做的正確方法是使用WordPress過濾器追加到tinyMCE init。例如：

PHP（在functions.php中或者其他地點上編輯頁面加載運行）：

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

這是測試，並在WordPress 3.9的工作（雖然我只是得到的控制檯輸出：

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

但是，要tinyM是由於CE正在嘗試使用的不贊成使用的代碼。這種方法仍然可以修改任何tinyMCE初始化選項 - 我目前正在使用它的init_instance_callback，它的工作很好。

-Thomas

來源

2014-07-30 18:50:08 tsdexter

我發現這非常有用，所以謝謝你離開它 – Stender

沒有概率 - 很高興它是有用的。 – tsdexter

在TinyMCE的4，的onChange不存在。你必須使用：

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

來源

2016-10-12 17:30:26

這是我在任何時候將事件綁定到一個或多個文本域解決方案，包括TinyMCE的javascript文件到您的網頁後給予該代碼被追加。（換句話說，工作要求這樣做的唯一的事情，是「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 
    }); 
}

注意「改變」事件不綁定的東西改變後，始終立即觸發。 According to the documentation，它會在編輯器內發生更改，導致添加撤銷級別時被解僱。「根據我的經驗，在您期望它發生時並不總是發生。

解決此問題的一種方法是綁定多個事件，例如「輸入更改」，但會有一些重疊，應該過濾。

來源

2017-03-13 14:06:02

TinyMCE的：如何後事件綁定其初始化

回答

相關問題