moffeltje moffeltje - 3 months ago 22
jQuery Question

How to tell if TinyMCE is initiated/created on a page?

I have a page with a canvas where a user can add text with the "add text" button. When the user clicks this, a new TinyMCE is created right on the canvas. I would like to change this new TinyMCE, but because I cannot access the tinyMCE creation code (the init) I got to have some kind of "on init listener" for TinyMCE in my `document.ready()'.

I know you can make a callback on init of the TinyMCE like this:

setup: function (ed) {
ed.on('init', function(args) {

But as I said I can't reach the creation code of the TinyMCE.

How can I check whether a new TinyMCE instance has been created (and use it in Javascript)?


If your page provides you a configuration object but you want to tweak its settings, you can always use JavaScript to modify/extend your standard init on a page by page basis.

For example, start with your standard configuration:

baseConfig = {
    selector: 'textarea'

...since this is just a simple JavaScript object you can inject additional properties/methods into that object before you use it to initialize TinyMCE.

For example:

 customConfig = {
    image_advtab: true,
    content_css : "CSS/content.css?"  + new Date().getTime(),
    setup: function (editor) {
        editor.on('init', function () {
            //Do what you need to do once TinyMCE is initialized

Then you can "inject" customConfig into baseConfig. The easiest way is to use jQuery's extend method:

$.extend(baseConfig, customConfig);

...this will take all the methods and properties from customConfig and add them to baseConfig. Once you are done you can then load TinyMCE using the newly updated baseConfig:


You can also use JavaScript to remove properties (read up on the delete) so you could also remove configuration properties that you don't want in your TinyMCE init.