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.