CODEWITHSUNDEEP
jquery-pluginstinymce
Ana Ameer
Ana Ameer

Reputation: 681

Tinymce is (sometimes) undefined

I'm using Tinymce (with jQuery) in a project I'm working at; we use a rich text editor for users to input information; however, sometimes when loading the page Firefox and Chrome will detect a 'tinymce is not defined' error (sometimes at different lines of the code), while other times the page will load just fine. What's weird is that it works perfectly with IE.

Here's a bit of the code I'm using:

view.find('textarea.rich-text').each(function () {        
   $(this).tinymce( /* ...rules... */);        
});

And later on

_variable.find("#summary").tinymce().setContent(content);

This line is where the error (sometimes) gets caught. It seems to me that the problem is a loading issue, even though the tinyMCE plugin is initialized about 5000 lines prior this line.

Update: For now I have managed to 'solve' the problem with a setTimeout, but this seems like a really ugly way to do it.

Upvotes: 5

Views: 10291

Answers (2)

Udit Desai
Udit Desai

Reputation: 231

If you do not have control over init method of TinyMCE then, you can follow this solution.

jQuery(document).ready(function($) {

    function myCustomSetContent( id, content ) {
        // Check if TinyMCE is defined or not.
        if( typeof tinymce != "undefined" ) {
            var editor = tinymce.get( id );
            // Check if TinyMCE is initialized properly or not.
            if( editor && editor instanceof tinymce.Editor ) {
                editor.setContent( text );
                editor.save( { no_events: true } );
            } else {
                // Fallback
                // If TinyMCE is not initialized then directly set the value in textarea.
                //TinyMCE will take up this value when it gets initialized.
                jQuery( '#'+id ).val( text );
            }
            return true;
        }
        return false;
    }

    function myCustomGetContent( id ) {
        // Check if TinyMCE is defined or not.
        if( typeof tinymce != "undefined" ) {
            var editor = tinymce.get( id );
            // Check if TinyMCE is initialized properly or not.
            if( editor && editor instanceof tinymce.Editor ) {
                return editor.getContent();
            } else {
                // Fallback
                // If TinyMCE is not initialized then directly set the value in textarea.
                // TinyMCE will take up this value when it gets initialized.
                return jQuery( '#'+id ).val();
            }
        }
        return '';
    }

    $(".class-to-update-content").on("click", function(e) {
        myCustomSetContent( "tinymce-editor-id", "New Content in Editor" );
    });

    $(".class-to-get-content").on("click", function(e) {
        $("div.class-to-display-content").html( myCustomGetContent( "tinymce-editor-id" ) );
    });
});

Ref : http://blog.incognitech.in/tinymce-undefined-issue/

EDIT: Solution included

Upvotes: 0

Dave L.
Dave L.

Reputation: 9781

A few points:

  • You don't mention whether or not the TinyMCE initialization is done within a jQuery ready event function. It should be of course.

  • You don't need the each loop. You can just say:

$('textarea.rich-text').tinymce({ script_url : '../js/tinymce/jscripts/tiny_mce/tiny_mce.js', theme : "advanced", ... });

  • You don't need the call to find since you are just selecting by id. Just do:

$("#summary").tinymce().setContent(content);

  • Your real issue is probably that tinymce has not finished initializing itself when you get the error. You see it has to load a script from the configured script_url. That may take a while. Therefore, you have to make use of a callback such as oninit.

Upvotes: 6

Related Questions