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.