как заставить ckeditor перестать удалять пустые div

1

Здесь есть похожие вопросы в stackoverflow, но ответы на эти вопросы не работают для меня, поэтому, пожалуйста, не указывайте это как дубликат.

В моих cms я хочу, чтобы люди могли добавлять страницы контента, которые являются SPA (Single Pages Applications). Очень часто для таких приложений нет ничего, кроме div с некоторыми атрибутами, а javascript используется для загрузки приложения в div. Поэтому я хочу, чтобы пользователи могли создавать контент, состоящий только из пустого div с некоторыми атрибутами вроде этого:

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

Однако ckeditor (я использую версию 4.6.2 на данный момент) всегда удаляет пустой div. От поиска и поиска похожих вопросов здесь я пробовал разные вещи в config:

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 - это единственный контент в редакторе, скрипт и css для моего SPA добавляются извне редактора. Мне просто нужно добавить div без его удаления. Я пытаюсь добавить div, используя sourcedialog.

Я не хочу изменять исходный код 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);
Теги:
ckeditor

1 ответ

0

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

Работает для меня.

ОБНОВИТЬ

Попробуйте это и посмотрите, работает ли он, но я могу иметь пустые divs без проблем.

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

ОБНОВЛЕНИЕ 2

Также попробуйте это, у меня это в моей конфигурации, которая не удаляет пустой div

config.htmlEncodeOutput = false;

  • 0
    спасибо, только что попробовал, у меня не работает
  • 0
    Также что-то еще, чтобы попробовать.
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню