Как addStylesSet взаимодействует с содержимым css?

Question

Я перенаправил файл contents.css для моего CKEditor 3.6 для таблицы стилей моего сайта:

CKEDITOR.config.contentsCss = '/css/style.css'; 

Теперь я хотел бы добавить некоторые стили из этой таблицы стилей в раскрывающемся списке для пользователей, чтобы выбрать при редактировании содержимого. Предыдущий разработчик создал это:

CKEDITOR.addStylesSet('cms_styles', 
[ 
    { 
     name : 'Page Header', 
     element : 'h2' 
    }, 

    { 
     name : 'Page Text', 
     element : 'p' 
    }, 

Он работает, но имеет мало смысла. Откуда они получают свой стиль от того, что имя класса не может иметь пробелы? Почему задан элемент, если мы просто добавляем стили к выпадающему списку? Google не показал хороших результатов для addStylesSet, и руководство разработчика, которое я нашел (http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles), действительно было не очень специфичным.

Я не хочу отображать все доступные классы; только некоторые из которых мы определяем.

Answer 1

Свойство name для объектов стиля используется только для целей показа, оно никак не влияет на содержание. Что работает предыдущий разработчик, потому что эти стили просто задают элемент, а css, вероятно, имеет стиль, определенный с помощью этих спецификаторов элементов.

Свойство element устанавливается так, что CKEditor знает, как применить этот стиль к контенту. Если у вас есть стиль с свойством element, имеющим значение p, тогда этот стиль станет стилем блока и применим к действующему в данный момент блоку p. Если свойство element имеет значение span, тогда стиль будет применен только к выделенному тексту (он будет окружен элементом span, если он еще не существует).

Чтобы получить стили в раскрывающемся списке для представления классов в вашем внешнем CSS, вам необходимо добавить объекты стиля к установленным стилям и установить атрибут class элемента, к которому применяется стиль. Установив свойства свойства attributes объекта стиля, вы можете иметь CKEditor добавлять или изменять атрибуты элемента, к которому применяется стиль. Для наших целей мы хотим установить свойство class свойства attributes, чтобы класс, определенный в вашем приложении css.

CSS:

p.myBlockStyle { 
    font-size: 32px; 
} 

CKEditor stylesSet массив:

[ 
    { 
     name: "My Block Style", 
     element: "p", 
     attributes: { 
      "class": "myBlockStyle" 
     } 
    } 
] 

Обратите внимание, что class свойство имеет это имя, потому что цитируемый class является зарезервированным ключевым словом.