Question

187

TinyMCE: How bind on event after its initialized

rated 0 times [ 189] [ 2] / answers: 1 / hits: 21625 / 11 Years ago, thu, august 29, 2013, 12:00:00

I already searched a lot but by google-fu'ing don't get me any results :(

I have an already initialized tinyMCE editor which initialization process I cannot control, so code like the following don't 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 following doesn't work either since the jQuery tinymce plugin isn't defined:

$('textarea').tinymce({

    setup: function(ed) {

        ed.onClick.add(function(ed, e) {

            alert('Editor was clicked: ' + e.target.nodeName);

        });

    }

});

I mean, it has to be using the tinymce.something syntax.

How can I bind a callback function to whatever tinyMCE event after tinyMCE is already initialized?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nestorjarettg

Add To Favorites

Follow

Total Points: 451

Total Questions: 108

Total Answers: 108

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

nestorjarettg questions

1 Discord Bot Not Playing Audio discord.js v13

Sat, Sep 25, 21, 00:00, 3 Years ago

1 Access and modify react context from jest test with react testing library

Wed, Sep 9, 20, 00:00, 4 Years ago

1 Uncaught ReferenceError: _ is not defined at < anonymous>:1:1 (Not jQuery)

Sun, Feb 16, 20, 00:00, 4 Years ago

1 403 Access Error returned from Browser possibly caused by AWS

Wed, Jan 29, 20, 00:00, 4 Years ago

1 Uncaught TypeError: Class extends value #< Object> is not a constructor or null

Mon, Jan 13, 20, 00:00, 4 Years ago

View All

answered 11 Years ago rocky · Accepted Answer

After hacking into the tinymce object with 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 that callback function one can set the whatever event binding one wants.

The setTimeout call is to overcome the racing condition of tinymce and jQuery, since when the call to tinymce.editors[i].onChange.add() is made tinymce wasn't initialized yet.