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无法输入

2 个答案: