TinyMCE: how to bind an event after it is initialized

Question

I have searched many times, but google-fu 'did not get any results :(

I already have the tinyMCE editor tinyMCE , which I cannot control the initialization process, so code like the following does not work at all:

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

Code like the one below doesn't work since the jQuery tinymce plugin is not defined:

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

I mean, it should use the tinymce.something syntax.

How to associate a callback function with any tinyMCE event after tinyMCE is initialized?

Answer 1

After hacking the tinymce object using console.log (), I found a working solution:

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

Inside this callback function, you can set any required event that is required.

The call to setTimeout is to overcome the racing state of tinymce and jQuery , since tinymce is not yet initialized when tinymce.editors[i].onChange.add() called.

Answer 2

Although this post is already old, but I think other people will need this answer. I had the same problem and fix it I did:

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

Based on http://www.tinymce.com/wiki.php/Configuration3x:init_instance_callback

Answer 3

EDITOR: oops - I thought this was another question I was considering that was specific to WordPress + TinyMCE, I don't think so. Although I will leave the answer here, as it may be useful to others.

The right way to do this would be to add tinyMCE init using the WordPress filter. For example:

PHP (in functions.php or another place that executes when the page loads):

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

This is tested and works in WordPress 3.9 (although I just get console output:

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

But this is because you are trying to use outdated tinyMCE code. This method still works to change any of the tinyMCE init parameters - I am currently using it for init_instance_callback and it works great.

-Thomas

Answer 4

In TinyMCE 4, onChange does not exist. You should use:

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

Answer 5

Here is my solution for attaching events to one or more text areas at any time, given that this code is added after the tinymce javascript file is included in your page. (In other words, the only thing required for this is the existence of the variable "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 }); } 

Note that the change event does not necessarily always fire instantly after something has changed. According to the documentation , it "starts when changes occur in the editor that cause the undo level to be added." This, in my experience, does not always happen when you expect it to happen.

One way to overcome this is to link several events, such as an “input change,” however there will be some overlap, which then needs to be filtered out.