Javascript 如何使ckeditor停止删除空div

在stackoverflow上也有类似的问题，但这些问题的答案对我来说并不适用，所以请不要将此标记为重复

在我的cms中，我希望人们能够添加SPA（单页应用程序）内容页。这类应用程序通常只有一个具有某些属性的div，而javascript用于将应用程序加载到div中。因此，我希望用户能够创建只包含一个具有以下属性的空div的内容：

<div data-cscal-eventsource="default" data-cscal-height="550" id="eventCal" class="cs-eventcal"></div>

extraAllowedContent: 'div(*){*}[*]; ol li span a(*){*}[*]'

应该关闭所有过滤，但仍会被删除

CKEDITOR.dtd.$removeEmpty['div'] = false;

也可以在一些答案中找到，但对我不起作用

在将allowedContent设置为true之前，我尝试了各种与extraAllowedContent类似的内容：

<div data-cscal-eventsource="default" data-cscal-height="550" id="eventCal" class="cs-eventcal"></div>

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);

（函数（$）{
var xsrfToken=$（'[name=“\uu 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=$（“#编辑配置”）。数据（“usingCdn”）；
变量editorConfig={
工具栏：['Sourcedialog'，'Maximize']，
['SelectAll'，'RemoveFormat'，'Cut'，'Copy'，'Paste'，'PasteText'，'PasteFromWord'，'-'，'Print']，
['Undo'、'Redo'、'-'、'Find'、'Replace'、'Bold'、'Italic'、'Underline'、'-'、'Strike'、'Superscript']，
'/',
['Blockquote'，'Format']，['NumberedList'，'BulletedList']，
[“链接”、“取消链接”、“锚定”]，
['Image'，'oembed'，'Table'，'HorizontalRule'，'Smiley'，'SpecialChar'，'CodeSnippet']，
外部插件：'oembed，cloudscribe filedrop，sourcedialog，codesnippet'，
removePlugins:'scayt，wsc'，
格式标签：'p；h1；h2；h3；h4；pre；address；div'，
dropFileUploadUrl:dfUrl，
dropFileXsrfToken:xsrfToken，
linkWebSizeToOriginal:对，
forcePasteAsPlainText:对，
filebrowserWindowHeight:“70%”，
filebrowserWindowWidth:“80%”，
filebrowserBrowseUrl:fbUrl，
filebrowserImageBrowseUrl:ibUrl，
allowedContent:true，//暂时尝试禁用筛选
extraAllowedContent:'div（*）{*}[*]；ol li span a（*）{*}[*]，//允许这些标记的所有类和属性
fillEmptyBlocks:false
};
如果（使用CDN==真）{
//警报（“使用cdn”）；
addExternal（'widget'，'/ckjs/plugins/widget/'，'plugin.js'）；
addExternal（'widgetselection'，'/ckjs/plugins/widgetselection/'，'plugin.js'）；
addExternal（'lineutils'，'/ckjs/plugins/lineutils/'，'plugin.js'）；
addExternal（'oembed'，'/ckjs/plugins/oembed/'，'plugin.js'）；
addExternal（'cloudscribe-filedrop'，'/ckjs/plugins/cloudscribe-filedrop/'，'plugin.js'）；
}
//editorConfig.protectedSource.push（/]*>/g）；
//CKEDITOR.dtd.$removempty['div']=false；
//$.each（CKEDITOR.dtd.$removempty，函数（i，值）{
//CKEDITOR.dtd.$removempty[i]=0；
//});
var ck=CKEDITOR.replace（editorId，editorConfig）；
ck.on（'instanceCreated'，函数（ev）{
CKEDITOR.dtd.$removempty['div']=false；
});
var userLocale=$（'#'+datepickerid）.data（“locale”）；
$（'#'+datepickerid）.datetimepicker({
调试：错误，
widgetPositioning:{水平：“左”，垂直：“下”}，
基波潘：是的，
AllownPuttoggle:对，
语言环境：userLocale
});
})（jQuery）；

config.basicEntities=false//在您的cke.editor配置js文件中

对我有用

更新

试试这个，看看它是否有效，但我可以有空div没有问题

for (var tag in CKEDITOR.dtd.$removeEmpty) {
    CKEDITOR.dtd.$removeEmpty[tag] = false;
}

更新2

还可以试试这个，我的配置中有这个，它不会删除空div

---

config.htmlEncodeOutput=false
相当棘手-在我的情况下，我需要设置

config.ignoreEmptyParagraph = false;

为了最终显示DIV。。。旁边

CKEDITOR.dtd.$removeEmpty.div = 0

而且允许div…
我想已经晚了，但我在这里回复供参考。
我们可以在CKEditor的config.js中设置
config.extraAllowedContent='div样式*id'

注意：我正在使用CKEditor 4
尝试其他功能。再次感谢您，但使用htmlEncodeOutput=false时，我无法使用。我还尝试将div的remove empty tag设置为false，但对于所有标记，它并没有解决meSeems的问题，就像某些东西不正确一样，这是我的配置，我刚刚测试过，它可以工作；）老实说，甚至不确定也没有说任何地方。抱歉，只是在一个随机文件中随机发现了它-他们没有很好的文档记录。不管怎么说，看起来3.6.3版上有即时通讯你解决过这个问题吗？我有同样的问题，但我找到的答案都不能解决。不，我没有。我在我的cms中设置了一个选项来禁用每页编辑器，这样用户就可以使用一个纯文本区域为SPAconfig.ignoreEmptyParagraph=false输入一个空div；只有这个对我有用。