在隐藏 div 时无法输入 tinyMCE

Question

我在我的网站中使用了 2 个 tinyMCE 实例。

两者都已正确创建并且 get() 向我发送了正确的 ID。

我的第一个编辑器：#model_editor 已初始化并显示在加载的页面上。

我的第二个编辑器：#headerfooter_editor 在页面加载时初始化，但在隐藏的 div 中 (#settings-1)。当用户单击如下按钮时，它会显示在可见容器 (#settings-content) 上：

$('#settings-menu-general').click (function () {
    var temp_html = $('#settings-1').html();
    $('#settings-content').html(temp_html);
});

在这种情况下，绘制了 tinyMCE，但无法进行交互（键入、按钮等......）。这里应该有一个焦点问题，但我不明白。有什么想法吗？

Answer 1

我遇到了与 tinymce3 类似的问题，发现在初始化编辑器之前让 tinymce 源元素可见会有所帮助（tinymce 无论如何都会隐藏其源元素）。否则我有奇怪的编辑器行为。

所以下面的代码是用来设置编辑器内容的？

$('#settings-menu-general').click (function () {
    var temp_html = $('#settings-1').html();
    $('#settings-content').html(temp_html);
});

Answer 2

感谢 Thariama，我已将编辑器的初始化移动到它显示的那一刻，而不是页面加载的那一刻，它工作正常。为此，我使用了 html() 方法的回调技巧：

$('#settings-content').html(temp_html).promise().done(function(){
        //your callback logic / code here
        tinymce.init({
            selector: "#headerfooter_editor",
            entity_encoding : "raw",
            encoding: "UTF-8",
            theme: "modern",
            height: "500px",
            width: "100%",
            variables_list : variable_array,
            plugins: [
                "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons template paste textcolor colorpicker textpattern modelinsert"
            ],
            toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons",
            toolbar2: "variable_insert | question_insert",
            image_advtab: true,
            init_instance_callback : "mceInitInstance",
            templates: [
                {title: 'Test template 1', content: 'Test 1'},
                {title: 'Test template 2', content: 'Test 2'}
            ]
        });

在隐藏 div 时无法输入 tinyMCE

tinyMCE impossible to type when in a hidden div

html

css

jquery

tinymce