我正在尝试将tinyMCE编辑器添加到我的页面,将其删除,然后再次添加,但出现错误。
当我运行A部分,然后运行B部分,而不是运行A部分时,出现错误:
Error: g.win.document is null Source File: tiny_mce/tiny_mce.js Line: 1
甲部
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的后端分支,下面是完整的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'); } }); }
要彻底删除编辑器实例并避免任何错误,请使用:
tinymce.EditorManager.execCommand('mceRemoveControl',true, editor_id);
要重新初始化实例,请使用:
tinymce.EditorManager.execCommand('mceAddControl',true, editor_id);
要知道,在DOM移动TinyMCE的编辑器,当你需要removeControl与addControl过,否则会导致JS错误。
removeControl
addControl
从 TinyMCE 4开始 ,删除和重新初始化实例的方法现在…
tinymce.EditorManager.execCommand('mceRemoveEditor',true, editor_id);
tinymce.EditorManager.execCommand('mceAddEditor',true, editor_id);