TinyMCE à l'intérieur caché div ne sont pas affichés comme activés lorsque nous mettons le div visible

Question

J'ai un problème avec tinyMCE (éditeur WYSIWYG). J'ajoute en fait le textarea dans un élément HTML comme un DIV qui a actuellement l'attribut de style "display: none".

Lorsque je modifie le style d'affichage DIV pour le rendre visible, le petit éditeur de MCE est désactivé.

Remarque importante: Le paramètre à l'origine du problème est l'option "auto_resize". C'est la seule option que j'active/désactive qui fait que l'éditeur tinyMCE passe en mode édition ou en lecture seule.

Voici mon code:

tinyMCE.init({ 
    mode: "specific_textareas", 
       editor_selector: /(RichTextArea)/, 
       theme: "advanced", 
       auto_reset_designmode: true, 
       auto_resize:true, 
       theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,justifyfull", 
       theme_advanced_buttons2: "", 
       theme_advanced_buttons3: "", 
       theme_advanced_buttons4: "", 
       theme_advanced_more_colors: 0, 
       theme_advanced_toolbar_location: "external", 
       theme_advanced_toolbar_align: "left" 
}); 

...

<a href="#" onclick='document.getElementById("myHiddenDiv").style.display = "block"; return false;'>Show WYSIWYG</a><br/> 
<div id="myHiddenDiv" style="display:none"> 
    <!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded --> 
    <textarea class="RichTextArea" id="elm1" name="elm1" rows="15" cols="80" style="width: 80%"> 
     &lt;p&gt;This is the first paragraph.&lt;/p&gt; 
     &lt;p&gt;This is the second paragraph.&lt;/p&gt; 
     &lt;p&gt;This is the third paragraph.&lt;/p&gt; 
    </textarea> 
</div> 

Je voudrais savoir si quelqu'un a une idée de la façon de résoudre cette question?

Answer 1

Essayez d'appeler tinyMCE.init (...) après avoir affiché le div contenant.

Answer 2

Cette question est assez ancienne, mais j'ai aussi eu ce problème. J'ai corrigé avec des styles en ligne.

<textarea class="tinymce" style="width: 300px; height: 400px"></textarea> 

Pour faciliter je construis ce script simple à faire pour ir moi avant init()

$('textarea.tinymce').each(function(){ 
    $(this).css({ 
     width: $(this).width(), 
     height: $(this).height() 
    }); 
})