I have a select that onchange trigger a js funtion to show/hide tinymce editor:

<select id="mySelect" onChange="myFuntion()">
<option value="1">Yes</option>
<option value="0">No</option>

Then I have a textarea with tinymce (loaded on page load).

<textarea class="mce" id="myTextarea"></textarea>
<script src="tinymce.js></script> // file with global tinymce.init({ ... });

The js function is like:

<script>    
function myFuntion(){ 
  if( $( '#mySelect' ).val() == '1' ) { tinymce.get( 'myTextarea' ).show(); } 
  else { tinymce.get( 'myTextarea' ).hide(); }
}
$( document ).ready(function() { myFuntion(); }); // show/hide tinymce based on how the mySelect setting is on page load

Everything works great except for the "$( document ).ready(function(){ myFuntion(); });" that throw an error "Uncaught TypeError: Cannot read property 'show' of null", I think its because tinymce is not yet loaded.

There is a way to change the "document ready function" with "when tinymce is loaded > execute myFunction()"

PS: I use tinymce 4, the tinymce.init() is on a external files and used on other pages, so i prefer not to edit this file

EDIT: my actual workaround is to use: setTimeout( function(){ myFunction(); }, 1500 ); but if there is a callback or similiar, for example $(document).on('tinymce:init') will be great

I have a select that onchange trigger a js funtion to show/hide tinymce editor:

<select id="mySelect" onChange="myFuntion()">
<option value="1">Yes</option>
<option value="0">No</option>

Then I have a textarea with tinymce (loaded on page load).

<textarea class="mce" id="myTextarea"></textarea>
<script src="tinymce.js></script> // file with global tinymce.init({ ... });

The js function is like:

<script>    
function myFuntion(){ 
  if( $( '#mySelect' ).val() == '1' ) { tinymce.get( 'myTextarea' ).show(); } 
  else { tinymce.get( 'myTextarea' ).hide(); }
}
$( document ).ready(function() { myFuntion(); }); // show/hide tinymce based on how the mySelect setting is on page load

Everything works great except for the "$( document ).ready(function(){ myFuntion(); });" that throw an error "Uncaught TypeError: Cannot read property 'show' of null", I think its because tinymce is not yet loaded.

There is a way to change the "document ready function" with "when tinymce is loaded > execute myFunction()"

PS: I use tinymce 4, the tinymce.init() is on a external files and used on other pages, so i prefer not to edit this file

EDIT: my actual workaround is to use: setTimeout( function(){ myFunction(); }, 1500 ); but if there is a callback or similiar, for example $(document).on('tinymce:init') will be great

• javascript
• jquery
• tinymce
• document-ready

3 Answers 3

In tinymce 4 try to do with Promise

tinymce.init({
//some settings
}).then(function(editors) {
   //what to do after editors init
});

To add to the answer that Kim Gysen wrote ... 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 = {
    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:

tinymce.init(baseConfig);

This general technique allows you to create a "standard" configuration with all the base capabilities you need while injecting additional configuration options on a page by page basis.

So now you can trigger the "onInit" capability in TinyMCE when you need it without modifying the core configuration used elsewhere.

According to the docs, you have to declare the callback as follows:

function myCustomOnInit() {
        alert("We are ready to rumble!!");
}

tinyMCE.init({
        ...
        oninit : myCustomOnInit
});

This is the handle they offer to assure that tinyMCE is ready.
What you're saying here:

I use tinymce 4, the tinymce.init() is on a external files and used on other page, so i prefer not to edit this file

Doesn't make a lot of sense to me.
According to the docs:

oninit: This option enables you to specify a function to be executed when all editor instances have finished their initialization. This is much like the onload event of an HTML page.

Makes it abundantly clear that this is the way you should go.
It doesn't matter where tinymce.init() is declared, just make sure that you provide the function you wish to execute is added.