html - other content seen and blinks during tinymce loading

Question

I am having textarea and buttons under it. I am adding tinymce editor to this textarea. However, when the pages is loaded first time, user can see something like blinking. He sees buttons and only then wysiwyg editor appears and buttons are pushed under it.

My HTML:

<div class="middle">
        <form method="post" id="doc_form" target="somwhere">
            <textarea name="doc_text"><?php echo $file; ?></textarea>
            <input type="hidden" name="submitted" id="submitted" value="1" />
        </form>
        <a id="doc_send_email" class="btn">SEND</a>
        <a id="pritn_pdf_btn" class="btn">Print <span class="span_pdf">PDF </span></a>                
    </div>

So, when user opens a webpage, he is able to see button SEND and button PRINT for some ms. How to deal with this?

EDIT: The answer below is fine. Another option could be creating div aroud text with predefined height.

Answer 1

You can add style="display: none;" on you buttons and then do this in your tinymce configuration:

tinymce.init({
    ...
    setup: function(editor) {
        editor.on('init', function(e) {
            $("#doc_send_email").css("display", "block");
            $("#pritn_pdf_btn").css("display", "block");
        });
    }
});