Плагин Indentblock CKEditor (4) заставляет стили, содержащие свойство margin, не появляться в комбо Styles

Question

Если стиль в stylesSet использует свойство margin, он не может быть добавлен в комбинацию стилей.

Удаление плагина Indent Block решает проблему.

Но почему? Это ошибка в плагине, или в другом месте библиотеки редактора, или с моей конфигурацией?

Другие стили - не использующие свойство margin - появляются в комбо.

Я использую CKEditor 4.10.0.

РЕДАКТИРОВАТЬ : Подробнее: я проследил это до того факта, что в Indent Block применяются преобразования фильтров, которые расширяют свойство margin до left-left, margin-top, margin-right и margin-bottom, но только добавляет поля left-left и margin-right к разрешенному контенту (свойствам). В результате свойства margin-top и margin-bottom считаются недопустимыми, он не проходит проверку фильтра, а сочетание стилей скрывает стиль.

var config = {
  "stylesSet": [{
      "name": "H1 with margin",
      "element": "h1",
      "styles": {
        "margin": "0"
      }
    },
    {
      "name": "H1 without margin",
      "element": "h1",
      "styles": {
        "font-weight": "bold"
      }
    }
  ],
  "extraPlugins": "indentblock"
};

CKEDITOR.replace("editor", config);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.10.0/ckeditor.js"></script>
<div id="editor"></div>

Если приведенный выше фрагмент не работает, здесь есть JSFiddle: https://jsfiddle.net/DandyAndy/xpvt214o/729425/

В результате стиль " H1 без полей " появляется в комбинированном списке стилей, а стиль " H1 с полями " - нет.

Список загружаемых плагинов (все стандартные): 'dialogui, диалог, a11yhelp, dialogadvtab, базовые стили, blockquote, уведомление, кнопка, панель инструментов, буфер обмена, кнопка панели, панель, плавающая панель, цветовая кнопка, colordialog, шаблоны, меню, контекстное меню , copyformatting, отд, elementspath, enterkey, юридические лица, найти, listblock, richcombo, шрифт, horizontalrule, htmlwriter, wysiwygarea, отступы, indentblock, indentlist, смайлик, оправдаться, список, liststyle, максимизирует, pastetext, pastefromword, печать, removeformat, SelectAll , showblocks, showborders, sourcearea, SPECIALCHAR, stylescombo, закладка, стол, tabletools, tableselection, отменить. CDN в JSFiddle, похоже, не загружает плагин indentblock, поэтому в конфигурации есть тот, который включен в extraPlugins (в противном случае проблема не возникает, потому что этот плагин не загружается).

Answer 1

CKEditor использует Advanced Content Filter (ACF), который в основном позволяет вам решать, какие теги, атрибуты, стили и классы CSS можно использовать внутри редактора. По умолчанию плагины сообщают о содержимом, которое они хотят использовать, в ACF.

Поскольку ни один из плагинов не сообщил о стилях margin-bottom и margin-top, но вы все еще хотите использовать их в редакторе, вам необходимо расширить ACF вручную, используя extraAllowedContent , например,

CKEDITOR.replace("editor", {
extraAllowedContent : 'h1{margin-top,margin-bottom}'
});

или если вы хотите присвоить этот стиль большему количеству элементов, вы можете использовать:

CKEDITOR.replace("editor", {
extraAllowedContent : 'div h1 h2 h3 h4 h5 h6 ol p pre ul{margin-top,margin-bottom}'
});

Пожалуйста, посмотрите на вашу рабочую скрипку: https://jsfiddle.net/9tLyn3rx/4/

Подробнее об ACF можно узнать, перейдя по ссылкам ниже:

• https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
• https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html
• https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraAllowedContent
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-disallowedContent
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html#method-addTransformations

Answer 2

Во-первых, я точно не знаю, является ли это «ответом». Кажется, это ошибка, но, возможно, что-то отсутствует в моей конфигурации, чтобы сделать эту работу (например, добавление в разрешенный контент, хотя я бы сказал, что плагин должен управлять своим собственным разрешенным контентом).

Я проследил это до того факта, что в Indent Block применяются преобразования фильтров, которые расширяют свойство margin до left-left, margin-top, margin-right и margin-bottom, но только добавляют margin-left и margin-right к разрешенным содержание (свойства). В результате свойства margin-top и margin-bottom считаются недопустимыми, он не проходит проверку фильтра, а сочетание стилей скрывает стиль.

В плагинах / indentblock / plugin.js:

Регистрирует преобразование splitMarginShorthand для различных элементов (включая h1, которое я использовал в моем примере):

this.contentTransformations = [
    [ 'div: splitMarginShorthand' ],
    [ 'h1: splitMarginShorthand' ],
    [ 'h2: splitMarginShorthand' ],
    [ 'h3: splitMarginShorthand' ],
    [ 'h4: splitMarginShorthand' ],
    [ 'h5: splitMarginShorthand' ],
    [ 'h6: splitMarginShorthand' ],
    [ 'ol: splitMarginShorthand' ],
    [ 'p: splitMarginShorthand' ],
    [ 'pre: splitMarginShorthand' ],
    [ 'ul: splitMarginShorthand' ]
];

Но допускается только margin-left,margin-right в разрешенном контенте:

this.allowedContent = {
    'div h1 h2 h3 h4 h5 h6 ol p pre ul': {
    // Do not add elements, but only text-align style if element is validated by other rule.
        propertiesOnly: true,
        styles: !classes ? 'margin-left,margin-right' : null,
        classes: classes || null
    }
};

Удаление преобразований ИЛИ добавление margin-top,margin-bottom к разрешенному контенту решает проблему.