如何删除tinyMCE然后重新添加？

Question

我正在尝试将tinyMCE编辑器添加到我的页面,删除它,然后再次添加它但是出现错误.

当我运行A部分,然后B部分,再比A部分时,我得到错误:

Error: g.win.document is null
Source File: tiny_mce/tiny_mce.js Line: 1

A部分

        js += "            tinyMCE.init({ ";
        js += "                'mode' : 'exact', \n";
        js += "                'elements' : '" + ctrl.ID + "Editor', \n";
        js += "                'plugins' : 'insertdatetime,TVCMSLink,TVCMSImage',\n";
        js += "                'theme' : 'advanced',\n";
        js += "                'theme_advanced_layout_manager' : 'SimpleLayout',\n";
        js += "                'theme_advanced_buttons1' : 'backcolor, forecolor, |, bold, underline, strikethrough, |, numlist, bullist, charmap, |, undo, redo, |, anchor, link, tvlink, unlink',\n";
        js += "                'theme_advanced_buttons2' : '',\n";
        js += "                'theme_advanced_buttons3' : ''\n";
        js += "            });\n";

B部分

        js += "                        tinyMCE.getInstanceById('" + ctrl.ID + "Editor').remove();\n";

编辑:

以上是创建JavaScript的后端spinets ......下面是完整的JavaScript函数.第一次通过它打开对话框并工作,内容在编辑器中,没有错误.单击关闭按钮时,对话框将关闭.当我再次运行该功能时,对话框显示但编辑器为空,并出现上述错误.

function show_HP1B0() {
$('.EditLink').hide();
$.ajax({
    type: 'post',
    url: 'genericHandler.ashx',
    data: 'cmd=select&tableName=ExtraBlocks&id=4',
    dataType: 'json',
    success: function(data) {
        $('#HP1B0Editor').html(data['rows'][0]['Content']);
        alert($('#HP1B0Editor').html());
        tinyMCE.init({                 'mode' : 'exact', 
            'elements' : 'HP1B0Editor', 
            'plugins' : 'insertdatetime,Link,Image',
            'theme' : 'advanced',
            'theme_advanced_layout_manager' : 'SimpleLayout',
            'theme_advanced_buttons1' : 'backcolor, forecolor, |, bold, underline, strikethrough, |, numlist, bullist, charmap, |, undo, redo, |, anchor, link, tvlink, unlink',
            'theme_advanced_buttons2' : '',
            'theme_advanced_buttons3' : ''
        });
        var dlg = $('#ctl00_EXTRA_HTML_0_HP1B0Editor').dialog({
            modal: false,
            draggable: false,
            position: 'center',
            zIndex: 99999,  // Above the overlay
            width: 370,
            title: 'Content Block Editor',
            closeText: '',
            open: function () {
                $('body').css('overflow', 'hidden');
                if ($.browser.msie) { $('html').css('overflow', 'hidden'); } $('<div>').attr('id', 'loader').appendTo('body').show();
            },
            close: function () { $('body').css('overflow', 'auto'); if ($.browser.msie) { $('html').css('overflow', 'auto'); } $('#loader').remove(); },
            buttons: {
                'Save': function () {
                    tinyMCE.getInstanceById('HP1B0Editor').remove();
                    $('.EditLink').show();
                    $(this).dialog('close');
                },
                'Cancel': function () {
        alert('HP1B0Editor');
                    tinyMCE.getInstanceById('HP1B0Editor').remove();
                    $('.EditLink').show();
                    $(this).dialog('close');
                }
            }
        }).parent();
        dlg.appendTo(jQuery('form:first'));
    },
    error: function(data) {
        $('.EditLink').show();
        $('#HP1B0Editor').html('Error');
    }
});
}

Answer 1

要干净地删除编辑器实例并避免任何错误,请使用:

tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);

要重新初始化实例,请使用:

tinymce.EditorManager.execCommand('mceAddControl',true, editor_id);

要知道,在DOM移动TinyMCE的编辑器,当你需要removeControl与addControl过,否则会导致JS错误.

从TinyMCE 4开始,删除和重新初始化实例的方法现在......

要干净地删除编辑器实例并避免任何错误,请使用:

tinymce.EditorManager.execCommand('mceRemoveEditor',true, editor_id);

要重新初始化实例,请使用:

tinymce.EditorManager.execCommand('mceAddEditor',true, editor_id);

Answer 2

晚了,但它可能会让人头疼.以下是4.2.4版(2015-08-17)对我有用的内容:

tinymce.EditorManager.editors = []; 

然后我可以在同一个动态创建的div上重新启动一个编辑器

tinymce.init({selector:"#text"});   

Answer 3

这对我有用:

if (typeof(tinyMCE) != "undefined") {
  if (tinyMCE.activeEditor == null || tinyMCE.activeEditor.isHidden() != false) {
    tinyMCE.editors=[]; // remove any existing references
  }
}

Answer 4

现在可以做到

tinymce.remove("#id .class or tag");

Answer 5

如果您有更多具有不同设置的编辑器,这是重新保存它们保留设置的方法.

tinymce.EditorManager.editors.forEach(function(editor) {
    // code injection
    var old_global_settings = tinymce.settings;
    tinymce.settings = editor.settings;
    tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
    tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
    tinymce.settings = old_global_settings;
});

Answer 6

好的。只是提醒一下。

如果你有，比如说......总共有 5 个文本区域，你想在其中添加/删除 tinymce 实例。

和

您想在给定页面上多次执行此操作，那么最好为您的要求寻找替代解决方案。

为什么？.. 因为即使一切正常，tinymce 的所有分离和重新连接都需要花费大量时间来执行。浏览器将提供为您停止脚本等。

来源：我自己的经验，我尝试将不同的文本区域保存在单独的隐藏 div 中，并在需要时将其显示给用户。

Answer 7

尝试这个：

 tinymce.remove();

    setTimeout(function () {
    tinymce.init(
        {
        selector: 'textarea',
        menubar: false,
        height: "300",
        plugins: [
            'advlist autolink lists link image charmap print preview anchor textcolor ksfm',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code help'
        ],
        toolbar: 'undo redo | fontselect fontsizeselect styleselect | alignleft aligncenter alignright alignjustify | bold italic underline strikethrough | link table | ksfm'
        }
        );

    }, 1);