CKEDITOR не может применять стили из внешней таблицы стилей (настроенной в config.contentscss), когда config.fullPage=true

Чтобы определить пользовательский набор стилей в CKEditor со стилями из внешней таблицы стилей, настройте следующие параметры:

config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/externalStyleSheet.css';
config.stylesSet = [ { name : window.parent.getResource('editor.style.normal'), element : 'span', attributes: { 'class': 'formatnormal' } }, { name : window.parent.getResource('editor.style.small'), element : 'span', attributes: { 'class': 'formatsmall' } }, { name : window.parent.getResource('editor.style.large'), element : 'span', attributes: { 'class': 'formatlarge' } }, { name : window.parent.getResource('editor.style.bold'), element : 'span', attributes: { 'class': 'formatbold' } }, { name : window.parent.getResource('editor.style.smallBold'), element : 'span', attributes: { 'class': 'formatsmallbold' } }, { name : window.parent.getResource('editor.style.largeBold'), element : 'span', attributes: { 'class': 'formatlargebold' } }, { name : window.parent.getResource('editor.style.red'), element : 'span', attributes: { 'class': 'formatred' } }, { name : window.parent.getResource('editor.style.code'), element : 'span', attributes: { 'class': 'formatcode' } }, ];
config.fullPage = true;
config.resize_enabled = false;
config.removePlugins = 'resize,autogrow,elementspath';

Ожидаемый результат В наборе стилей должен отображаться список пользовательских стилей. После выбора текста и выбора стиля в раскрывающемся списке стиль должен быть применен.

Фактический результат Набор стилей показывает список пользовательских стилей со стилями, примененными к самим меткам. Но когда текст выделен внутри редактора (который находится в iframe) и стиль выбран из раскрывающегося списка, стиль применяется к тегу span, но соответствующий CSS отсутствует в контексте iframe.

Другие подробности Когда config.fullPage = false, проблем нет, вероятно, потому, что редактор не находится в другом iframe и ему доступен CSS. Проблема связана с config.fullPage = true, что необходимо в нашем случае для вертикальной полосы прокрутки.

Браузер: версия Chrome 66.0.3359.181.

ОС: Виндовс 10

Версия CKEditor: 4.9.2

Установленные плагины CKEditor: нет, кроме упомянутой выше конфигурации.


iframe css ckeditor ckeditor4.x
person Sainath    schedule 01.06.2018    source источник
comment
Посмотрите вывод на вкладке «Консоль и сеть» инструментов разработчика F12. Должна быть подсказка, что идет не так.   -  person stefan.seeland    schedule 01.06.2018
comment
@stefan.seeland, в консоли нет ошибок.   -  person Sainath    schedule 01.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Это задокументированное поведение:

содержимоеCss : Строка | Массив Файл(ы) CSS, которые будут использоваться для применения стиля к содержимому редактора. Он должен отражать CSS, используемый на целевых страницах, где должен отображаться контент.

Примечание. Это значение конфигурации игнорируется встроенным редактором, поскольку он использует стили, ›приходящие непосредственно со страницы, на которой отображается CKEditor. Он также игнорируется в полностраничном режиме, в котором разработчик имеет полный контроль над HTML-кодом страницы.

Подробнее читайте в документации и смотрите образец SDK.

https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss

Вы можете загрузить css на веб-страницу с помощью ckeditor, аналогично https://jsfiddle.net/z23qxw1y/

CKEDITOR.stylesSet.add('my_styles', [
    // Block-level styles.
    {
      name: 'Blue Title',
      element: 'h2',
      styles: {
        color: 'Blue'
      }
    },
  ]); 
 CKEDITOR.config.stylesSet = 'my_styles';
person stefan.seeland    schedule 01.06.2018