5

I am having an issue with tinyMCE (WYSIWYG editor). I am actually adding the textarea inside a HTML element like a DIV which is currently having the style attribute "display:none".

When I am changing the DIV display style to visible the tinyMCE editor is shown as disabled.

Important Note: The setting which is causing the issue is the "auto_resize" option. This is the only option that I turn on/off that make the tinyMCE editor goes in edit or read-only mode.

Here's my 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>

I would like to know if anyone has an idea of how to fix that issue?

Nordes
  • 2,493
  • 2
  • 21
  • 30

2 Answers2

7

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

slolife
  • 19,520
  • 20
  • 78
  • 121
  • I forgot to say that I have like 30 to 50 tinyMCE textarea inside my page. I don't want to call the tinyMCE.init that often. It may gives performance issue? no? – Nordes May 05 '09 at 18:08
  • You might have to change your init call to use: mode:"exact", elements:"id_of_unhidden_div" – slolife May 05 '09 at 18:15
  • I'll try that, but I think it's the only way ;). Personally I was using a setTimeout to auto resize when it become visible (kind of setInterval). But it's taking too much CPU for no reason. – Nordes May 05 '09 at 18:17
1

This question it's quite old, but I had this problem too. I fixed with inline styles.

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

To make it easier I build this simple script to do ir for me before the init()

$('textarea.tinymce').each(function(){
    $(this).css({
        width: $(this).width(),
        height: $(this).height()
    });
})
educolo
  • 854
  • 1
  • 6
  • 7