TinyMCE not loading content on first load

TinyMCE not loading content on first load

_Ronnie__Ronnie_ Posts: 19Questions: 5Answers: 0

The first time that I edit a row (as a modal), the TinyMCE editor loads properly, but it does not load existing content. Closing and re-opening does show the content, and indeed shows the content for all future calls until the page is reloaded.

I have tried loading TinyMCE without any options.

The strange thing is I always get this problem when calling the TinyMCE script (min.js) from a local file on the server. If I load it from the CDN (version 4.9.8), I do not get the problem. I have verified that the versions are the same and the file comparison is identical.

I need to run this locally on a server without access to the CDN in future, so could do with getting this to work. Any ideas?

Many thanks in advance.

Ronnie

This question has an accepted answers - jump to answer

Answers

  • _Ronnie__Ronnie_ Posts: 19Questions: 5Answers: 0

    EDIT: It appears that even when using the CDN, if I load an external plugin, the content does not load on first call. Very odd!

  • _Ronnie__Ronnie_ Posts: 19Questions: 5Answers: 0

    FURTHER EDIT (sorry): I've been stepping through editor.tinymce.js. Commenting out line 91 (conf._initSetVal = null;) seems to have fixed the problem.

    My knowledge and understanding of Javascript is not great, however. Will I have broken anything?

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Were you using v4.9.8 both locally and from the CDN, or a different version locally?

    Is it line 87 on this page that you commented out?

    Allan

  • _Ronnie__Ronnie_ Posts: 19Questions: 5Answers: 0

    Yes, I was using 4.9.8 both locally and CDN. I have verified that both js files are idential.

    I commented out line 91 from the downloaded version (above the code) with comments at the top. On the page given, it would be line 56 that was commented out.

    Ronnie

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    How interesting - its almost certainly a timing issue then since the line before the one you commented out should set the value in the TimeMCE editor and the initial value is no longer required. That initialisation must be slightly async and it is causing the initial value to be lost.

    Thanks for posting this - I'll look into this and see if there is an event we can listen for. But its good to hear you've got a workaround for now.

    Regards,
    Allan

  • _Ronnie__Ronnie_ Posts: 19Questions: 5Answers: 0

    Yes - that was the odd thing. As you say, the value should be set.

    However the timing issue only occurs on first load.

    Do you think my botch will cause any downstream problems?

    Is there a way to initialise tinymce on page load for the first time?

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    No - worst case that I can see, that change will just cause the value to be set into TinyMCE twice when initialised. That should happen so fast that the user won't even see it.

    Allan

  • hkindthkindt Posts: 1Questions: 0Answers: 0

    Commenting out line 91 works for me too, Tnx

  • yusaryusar Posts: 3Questions: 0Answers: 0

    I'm using TinyMCEv5 when this happen, commenting out these 3 lines in file editor.tinymce.js works for me, thanks

    conf._initSetVal = null;
    
        create: function ( conf ) {
            var that = this;
            conf._safeId = DataTable.Editor.safeId( conf.id );
     
            conf._input = $('<div><textarea id="'+conf._safeId+'"></textarea></div>');
     
            // Because tinyMCE uses an editable iframe, we need to destroy and
            // recreate it on every display of the input
            this
                .on( 'open.tinymceInit-'+conf._safeId, function () {
                    tinymce.init( $.extend( true, {
                        selector: '#'+conf._safeId
                    }, conf.opts, {
                        init_instance_callback: function ( editor ) {
                            if ( conf._initSetVal ) {
                                editor.setContent( conf._initSetVal );
    ---                         conf._initSetVal = null;
    +++                         // conf._initSetVal = null;
                            }
                        }
                    } ) );
         
                    var editor = tinymce.get( conf._safeId );
    
                    if ( editor && conf._initSetVal ) {
                        editor.setContent( conf._initSetVal );
    ---                         conf._initSetVal = null;
    +++                         // conf._initSetVal = null;
                    }
                } )
                .on( 'close.tinymceInit-'+conf._safeId, function () {
                    var editor = tinymce.get( conf._safeId );
    
    
                    if ( editor ) {
                        editor.destroy();
                    }
    
    ---                         conf._initSetVal = null;
    +++                         // conf._initSetVal = null;
                } );
     
            return conf._input;
        },
    
  • NettSiteNettSite Posts: 36Questions: 11Answers: 2

    Thanks, @yusar, that did it for me too.

  • paulgorepaulgore Posts: 1Questions: 0Answers: 0

    Thanks @yusar . I have read this article from TinyMCE and I think that is helpful in resolve the issue as well.

    JavaScript localStorage example with a rich text editor

This discussion has been closed.