Добавление своих стилей и классов в ckeditor

Добавление стилей

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

Стили добавляются в файле styles.js, находится он в корне папки плагина. 

К примеру добавим слегка оформленный блок и текст:

{ name: 'серый блок', element: 'div', styles: { 'background-color': '#f1f1f1', 'padding': '10px', 'border': '1px solid #CCC' } },
{ name: 'оранжевый текст', element: 'span', styles: { 'color': '#FF6600', 'font-size': '1.4em' } },

 

Добавление своих классов 

Добовление стилей конечно удобная вещь, но гораздо практичнее создавать свои классы, поскольку они меньше засоряют HTML код и для их изменения не придется поправлять весь сайт, а всего лишь доработать сам класс. Стоит учесть - если сменить название класса, не name для вользоватля, а в css и в js { 'class': 'block-grey' }, то везде добавленные в прошлом классы перестанут работать, т.к. в html коде они не изменятся, там останутся старые классы. Поэтому при выборе самого класса не стоит торопиться!

{ name: 'серый блок', element: 'div', attributes: { 'class': 'block-grey' } },
{ name: 'оранжевый текст', element: 'span', attributes: { 'class': 'text-orange' } },

 

Собственные классы добавляются в том же файле, но так же их надо не забыть определить в любом css файле стилей нашего сайта:

.block-grey{
    padding: 10px;
    background-color: #f1f1f1;
    border: 1px solid #CCC;
    margin-bottom: 10px;
}
.text-orange{
    color: #FF6600;
    font-size:1.4em;
}

 

Для того чтобы наши классы оформлялись и в самом редакторе, нужно добавить также их и в contents.css в корне плагина.