这里在stackoverflow上有与此类似的问题，但是那些问题的答案对我无效，请不要将其标记为重复。
在我的内容管理系统中，我希望用户能够添加单页应用程序（SPA）的内容页面。这种应用程序通常只有一个带有一些属性的div，并使用javascript将应用程序加载到该div中。因此，我希望用户能够创建仅由空div及其某些属性组成的内容，如下所示：
<div data-cscal-eventsource="default" data-cscal-height="550" id="eventCal" class="cs-eventcal"></div>
然而，无论是哪个版本的ckeditor（我目前使用的是4.6.2），它总是会删除空的div。通过谷歌搜索和在这里找到类似的问题，我尝试了各种不同的配置：
allowedContent : true
本应该关闭所有过滤，但仍然被删除。
CKEDITOR.dtd.$removeEmpty['div'] = false;
我也发现有些答案中提到了这一点，但却没有对我起作用。
在将allowedContent设置为true之前，我尝试了各种extraAllowedContent的设置，如下所示：
extraAllowedContent: 'div(*){*}[*]; ol li span a(*){*}[*]'
如果 div 元素包含一些文本，它会像这样工作，例如：
<div data-cscal-eventsource="default" data-cscal-height="550" id="eventCal" class="cs-eventcal">hello</div>
但我不想要那个文本，使用 nbsp 也不起作用。
如何让 CKEditor 不操作我的空 div？我的 div 是编辑器中唯一的内容，我的 SPA 的脚本和 CSS 是从编辑器外添加的。我只需要能够添加 div 而不被删除。我正在尝试使用 sourcedialog 添加 div。
我不想修改 ckeditor 源代码来解决这个问题。
为了清晰起见，我的完整代码如下，您可以在注释中看到我尝试过的一些东西：
(function ($) {
var xsrfToken = $('[name="__RequestVerificationToken"]:first').val();
var dfUrl = $("#editorconfig").data("dropfileuploadurl") || '/filemanager/upload';
var fbUrl = $("#editorconfig").data("filebrowserurl") || '/filemanager/filedialog?type=file';
var ibUrl = $("#editorconfig").data("imagebrowseurl") || '/filemanager/filedialog?type=image';
var editorId = $("#editorconfig").data("editorid") || 'foo';
var datepickerid = $("#editorconfig").data("datepickerid") || 'foo';
var usingCdn = $("#editorconfig").data("usingcdn");
var editorConfig = {
toolbar: [['Sourcedialog', 'Maximize'],
['SelectAll', 'RemoveFormat', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print'],
['Undo', 'Redo', '-', 'Find', 'Replace', 'Bold', 'Italic', 'Underline', '-', 'Strike', 'Superscript'],
'/',
['Blockquote', 'Format'], ['NumberedList', 'BulletedList'],
['Link', 'Unlink', 'Anchor'],
['Image', 'oembed', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar','CodeSnippet']],
extraPlugins:'oembed,cloudscribe-filedrop,sourcedialog,codesnippet',
removePlugins: 'scayt,wsc',
format_tags: 'p;h1;h2;h3;h4;pre;address;div',
dropFileUploadUrl: dfUrl,
dropFileXsrfToken:xsrfToken,
linkWebSizeToOriginal:true,
forcePasteAsPlainText:true,
filebrowserWindowHeight:'70%',
filebrowserWindowWidth:'80%',
filebrowserBrowseUrl:fbUrl,
filebrowserImageBrowseUrl: ibUrl,
allowedContent : true, //temporary trying to disable filtering
extraAllowedContent: 'div(*){*}[*]; ol li span a(*){*}[*]', // allow all classes and attributes for these tags
fillEmptyBlocks: false
};
if (usingCdn === true) {
//alert('using cdn');
CKEDITOR.plugins.addExternal('widget', '/ckjs/plugins/widget/', 'plugin.js');
CKEDITOR.plugins.addExternal('widgetselection', '/ckjs/plugins/widgetselection/', 'plugin.js');
CKEDITOR.plugins.addExternal('lineutils', '/ckjs/plugins/lineutils/', 'plugin.js');
CKEDITOR.plugins.addExternal('oembed', '/ckjs/plugins/oembed/', 'plugin.js');
CKEDITOR.plugins.addExternal('cloudscribe-filedrop', '/ckjs/plugins/cloudscribe-filedrop/', 'plugin.js');
}
//editorConfig.protectedSource.push(/<div[^>]*><\/div>/g);
//CKEDITOR.dtd.$removeEmpty['div'] = false;
//$.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
// CKEDITOR.dtd.$removeEmpty[i] = 0;
//});
var ck = CKEDITOR.replace(editorId, editorConfig);
ck.on('instanceCreated', function (ev) {
CKEDITOR.dtd.$removeEmpty['div'] = false;
});
var userLocale = $('#' + datepickerid).data("locale");
$('#' + datepickerid).datetimepicker({
debug: false,
widgetPositioning: { horizontal: 'left', vertical: 'bottom' },
keepOpen: true,
allowInputToggle: true,
locale: userLocale
});
})(jQuery);