Question

这里有关于stackoverflow的类似问题，但这些问题的答案对我不起作用，所以请不要将其标记为重复。

在我的cms中，我希望人们能够添加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);

Answer 1

config.basicEntities = false; //in your cke.editor config js file

适合我。

<强>更新

尝试这个并查看它是否有效，但我可以让空div没问题。

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

更新2

另外试试这个，我在配置中有这个没有删除空div＆＃39;

config.htmlEncodeOutput = false;

Answer 2

我认为已经很晚了，但是我在这里回复以供参考。我们可以在CKEditor的config.js中设置 config.extraAllowedContent ='div样式; * id';

注意：我正在使用CKEditor 4

Answer 3

非常棘手-就我而言，我需要设置

config.ignoreEmptyParagraph = false;

最后将DIV显示在...旁边

CKEDITOR.dtd.$removeEmpty.div = 0

并且完全允许DIVS ...

Answer 4

在 CKEditor 中，您可以有一个 configuration file。

您可以添加 custom config with the options here。

如何让ckeditor停止删除空div

4 个答案: