Why is my TinyMCE hidden textarea acting up?

问题:

I have about 7 textareas on a web page, all of them are rich text editors using TinyMCE. However at page load only 1 of them is visible and the rest of them hidden. The user can click a 'show' link which would display the remaining textareas one by one.

However, I have a weird problem. All the textareas are setup like this:

<textarea cols="40" rows="20"></textarea>

However, only the textarea displayed on page load is the full size I want it to be. The remaining textareas are really small when I show them. So I'm thinking that perhaps they aren't rendered because they are hidden on page load.

How can I remedy this?

回答1:

Try adding some CSS to textareas that are hidden.

For example, use

<textarea cols="40" rows="20" style="width: 40em; height: 20em"></textarea>

I think I ran into this, where TinyMCE's CSS overrides some of the default CSS behaviour. I ended up having to "re-override" it, and eventually edited the TinyMCE's css pages.

回答2:

I think this is an MCE bug, or at least a feature that MCE lacks.

Since I wanted to style my input box in CSS, not in HTML (yuck) I tried

visibility: hidden;

instead of

display: none;

and everything worked again.

I believe that the latter causes the element to take up no space, which trips up the MCE code which detects the width and height of the element.

回答3:

When loading TinyMCE with jQuery, this problem can be solved as such:

1- On your textarea, specify a height in the inline style attribute:

<textarea style="height:200px;" class="tinymce" name="myfield"></textarea>

2- add a callback function when instantiating a TinyMCE editor. e.g. tinymceLoaded

$('textarea.tinymce').tinymce({
    // Location of TinyMCE script
    script_url : 'PATH_TO_TINYMCE.js',

    // General options ...
    // Theme options...

    // callback function
    init_instance_callback : "tinymceLoaded"
});

3- Set the height of your Editors in the tinymceLoaded function:

function tinymceLoaded(inst){
    // get the desired height of the editor
    var height = $('#' + inst.editorId).height(); 

    // when the editor is hidden, the height calculated is 0
    // Lets use the inline style text to solve this problem
    if(height == 0){
        height = $('#' + inst.editorId).css('height'); // 200px
        height = height.replace(/[^0-9]/g, "");    // remove all non-numeric characters to isolate the '200'
    }

    // set the height of the hidden TinyMCE editor
    $('#' + inst.editorId + '_ifr').css({height: height + 'px'});
}

回答4:

Without having a few more specifics about your actual setup and how you're doing the vaious display/hide functionality it's hard to give a definitive answer. I can throw a few general thoughts out though:

• Do they render properly when you don't hide them on page load? That would give a definative answer for at what point the bug's occuring.
• When you toggle the view of the textarea can you explicity set the row/col attributes at the same time?
• Can you use css (maybe with !important) to set textarea width and height than to test if that has an effect?

回答5:

From TinyMCE inside hidden div are not displayed as enabled when we put the div visible, user's slolife answer helped me:

Try calling tinyMCE.init(...) after you unhide the containing div.

回答6:

I've been having the same issue where the height of the hidden textarea controls that were converted into TinyMCE editors were too small. Setting visibility to none worked but leaves a big empty space in its place.

The following solution worked well for me:

• Do not hide your textarea controls initially on page load
• Instead, set all of your TinyMCE's init config as follows:

tinyMCE.init({
        ...
        init_instance_callback : "onInstanceInit"
});

• In your onInstanceInit function, hide the initialized TinyMCE editor dynamically
• If you show this editor afterwards, the height will be normal again just like it was never hidden

回答7:

If you use production version of TinyMCE, you probably forgot to copy folders that tinymce.min.js needs. You need to have folders langs, plugins, skins and themes in the same folder as your tinymce.min.js file.

回答8:

Another reason for the hidden thing is when you remove elements from the dom with tinymce initialized on them. You need to remove tinymce from this element first, so you will avoid weird behaviour when initialize new tinymce elements.

So for exemple :

removeElementWithTinymce = function(elementToRemove){ var parent = elementToRemove.parentNode; tinymce.remove(elementToRemove.getAttribute('id')); parent.removeChild(elementToRemove); };

That's it.