当我们将div显示为可见时,隐藏div中的TinyMCE不会显示为已启用

StackOverflow https://stackoverflow.com/questions/826020

  •  05-07-2019
  •  | 
  •  

我遇到了tinyMCE(WYSIWYG编辑器)的问题。我实际上是在像DIV这样的HTML元素中添加textarea,它当前具有样式属性“display:none”。

当我将DIV显示样式更改为可见时,tinyMCE编辑器显示为已禁用。

重要说明:导致问题的设置是“auto_resize”;选项。这是我打开/关闭的唯一选项,使tinyMCE编辑器进入编辑或只读模式。

这是我的代码:

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>

我想知道是否有人知道如何解决这个问题?

有帮助吗?

解决方案

在取消隐藏包含div后,尝试调用tinyMCE.init(...)。

其他提示

这个问题已经很老了,但我也遇到了这个问题。 我修改了内联样式。

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

为了更容易,我在init()

之前构建了这个简单的脚本来为我做
$('textarea.tinymce').each(function(){
    $(this).css({
        width: $(this).width(),
        height: $(this).height()
    });
})
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top