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

Question

Чтобы определить пользовательский набор стилей в 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 , то проблема не возникает, возможно, потому что редактор не находится в другом фрейме, а CSS доступен дляЭто.Проблема связана с config.fullPage = true , который необходим в нашем случае для вертикальной полосы прокрутки.

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

ОС: Windows 10

Версия CKEditor: 4.9.2

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

Answer 1

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

contentsCss: String |Массив 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';