Category: TinyMCE

#TINYMCE: PAGELOAD FLICKERING V2

AmyLeave a comment

So a while back I wrote this post: #TinyMCE: Fixing Pageload Flickering

Well now I have found a problem with it.  When you load the page with the textarea hidden the plugins don’t seem to bind properly.  I had to come up with a new way to do the same thing.  Here is my solution.  Not ideal but seems to work fine so far.

Notice that the ‘display:none’ is now gone and the size is now set to a size so that the textarea is not visible on the page. Although, there is a small remnant left there. Not sure I like it but I’m not sure how to hide it.

@Html.TextAreaFor(m => m.ContentHtml, 
                       new { @class = "tinymce", maxlength = 5000, 
                       @style = "height:1px; width:1px; " })

Now once TinyMCE is properly initialized I manually set the iframe size to be the height and width I want.

$('textarea.tinymce').tinymce({
  script_url: '/scripts/tinymce/4.0.25/tinymce.min.js',
  theme: "modern",
  toolbar: "bold italic ",
  paste_auto_cleanup_on_paste: true,
  init_instance_callback: function (editor) {
     $(editor.getContainer()).find("iframe").css("height", "300px");
     $(editor.getContainer()).find("iframe").css("width", "100%");
  }
});

#TinyMCE: Fixing Pageload Flickering

AmyLeave a comment

When my TinyMCE boxes load I find that there is brief moment when it flickers, the users don’t like that.   Looking closely I found that the flicker is a brief glimpse of the underlying HTML that is rendered before the TinyMCE box finishes loading and is displayed.  To fix it I do some fancy hide/show work.  Initially the page is loaded with the control hidden, then when it is done loading it shows it. Since I had the code already put together, I left in an example of a read-only version of the editor.

When the page is loading mark the textarea as hidden:

     <div class="form-group">
        @Html.Label("Content:") @Html.ValidationMessageFor(m => m.ContentHtml)
        @if (Model.IsReadOnly)
        {
          @Html.TextAreaFor(m => m.ContentHtml, 
                            new { @class = "tinymce-ro", @readonly = "readonly", 
                            @style = "height:300px; width:100%; display:none" })
        }
        else
        {
          @Html.TextAreaFor(m => m.ContentHtml, 
                            new { @class = "tinymce", maxlength = 5000, 
                            @style = "height:300px; width:100%; display:none" })
        }
      </div>

Then show it again once loading is complete:

    $('textarea.tinymce').tinymce({
      script_url: '/scripts/tinymce/4.0.25/tinymce.min.js',
      theme: "modern",
      toolbar: "bold italic ",
      paste_auto_cleanup_on_paste: true,
      init_instance_callback: function (editor) {
        $('.mce-tinymce').show('fast');
      }
    });

    $('textarea.tinymce-ro').tinymce({
      readonly: true,
      script_url: '/scripts/tinymce/4.0.25/tinymce.min.js',
      theme: "modern",
      toolbar: false,
      menubar: false,
      statusbar: false,
      init_instance_callback: function (editor) {
        if (document.getElementById(editor.id).style.display === 'none') {
          editor.getBody().style.backgroundColor = "#EBEBE4";
        }
        $('.mce-tinymce').show('fast');
      }
    });

UPDATE: I discovered that my custom plugins were not loading properly when I used this method. I came up with another version posted here – Pageload Flickering V2.