Подключаем свои классы class=left и class=right и стили в редактор FCKEditor

Когда-то мы настраивали правильное отображение расположения картинок в Internet Explorer (см. статью: Проблема: как сделать, чтобы картинки правильно выравнивались по левому или правому краю в IE). Это было примени тельно к визуальному редактору FCKEditor.

Сегодня мы продвинемся дальше, а именно покопаемся в файлах FCKEditor и подключим в него свои классы. Например, можно заменить таким образов файл стандартных стилей fckeditor/editor/css/fck_editorarea.css на свой или подключить сразу свой собственный файл, чтобы в админке мы могли видеть информацию (текст, картинки) в таком же виде, как и во фронтэнде. Это удобно. Параллельно мы сделаем выравнивание изображений по правому и левому краям текста... так, чтобы в редакторе FCKEditor мы это самое выравнивание видели!!

Поехали!

Чтобы код страницы прошёл проверку на валидность, не должно быть в нём у <img> border... align... В то же время в редакторе FCKEditor эти атрибуты мы часто задаём, чтобы выровнять картинку справа или слева от текста. Как не потеряв этой функциональности, сделать чтобы консорциум W3C одобрил наш код?

1. Стили FCKEditor хранятся в fckeditor/editor/css/fck_editorarea.css. Мы не будем изменять его, а создадим в той же папке свой файл - fckeditor/editor/css/almix_fck_editorarea.css. В него поместим свои классы для выравнивания:

.left { float: left; margin: 0 10px 10px 0;}
.right { float: right; margin: 0pt 0px 10px 10px;}

2. В fckeditor/fckconfig.js заменим либо добавим строку подключения своего файла стилей (я добавляю):

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/almix_fck_editorarea.css' ;

3. Теперь сделаем удобное вставление картинок для пользователя редактора. Настройки хранятся в  fckstyles.xml. Мы тоже не будем его трогать, а создадим свой - almix_fckstyles.xml, чтобы при обновлении самого редактора не потерять свои изменения. Добавляем в fckconfig.js такую строку FCKConfig.StylesXmlPath = '/path/to/my/fckstyles.xml'. У меня это:

FCKConfig.StylesXmlPath        = FCKConfig.EditorPath + 'fckstyles.xml' ;
FCKConfig.StylesXmlPath         = FCKConfig.EditorPath + 'almix_fckstyles.xml' ;

Файл этот имеет формат:

<?xml version="1.0" encoding="utf-8" ?>
<Styles>
    <Style name="..." element="...">
        <Attribute name="..." value="..." />
        <Style name="..." value="..." />
        ...
    </Style>
</Styles>

Посмотрите на системный fckstyles.xml, чтобы сделать свой. Например:

Чтобы добавить стиль "Foo" который станет доступен в выпадающем списке редактора и обрамит выделенную часть в теги <span class="foo"></span> надо написать:

<Style name="Foo" element="span">
    <Attribute name="class" value="foo" />
</Style>

Сделать то же самое, только <div>:

<Style name="Foo" element="div">
    <Attribute name="class" value="foo" />
</Style>

Чтобыы вставить inline style, например выровнять image по правому краю:

<Style name="Image on Right" element="img">
    <Attribute name="style" value="float:right; margin:0 0 10px 10px;" />
</Style>

Но мы сделаем круче, вставим свой класс. Вот содержимое моего almix_fckstyles.xml:

<?xml version="1.0" encoding="utf-8" ?>
<Styles>
    <Style name="Слева" element="img">
        <Attribute name="class" value="left" />
    </Style>
    <Style name="Справа" element="img">
    <Attribute name="class" value="right" />
    </Style>
</Styles>

Здесь как раз и пригодились те классы, которые мы добавляли в первом пункте.

Вот чего мы получаем:

P.S. В следующей версии редактора под названием CKEditor (разработчики изменили название, потому что аббревиатура FCK может читаться как "Fuck", FuckEditor - это как-то по злому) свои стили можно дописать или изменить существующие по адресу - ckeditor/plugins/stylescombo/styles/default.js

CKEDITOR.stylesSet.add('default',[
{name:'Blue Title',element:'h3',styles:{color:'Blue'}},
{name:'Red Title',element:'h3',styles:{color:'Red'}},
{name:'Marker: Yellow',element:'span',styles:{'background-color':'Yellow'}},
{name:'Marker: Green',element:'span',styles:{'background-color':'Lime'}},
{name:'Big',element:'big'},
{name:'Small',element:'small'},
{name:'Typewriter',element:'tt'},
{name:'Computer Code',element:'code'},
{name:'Keyboard Phrase',element:'kbd'},
{name:'Sample Text',element:'samp'},
{name:'Variable',element:'var'},
{name:'Deleted Text',element:'del'},
{name:'Inserted Text',element:'ins'},
{name:'Cited Work',element:'cite'},
{name:'Inline Quotation',element:'q'},
{name:'Language: RTL',element:'span',attributes:{dir:'rtl'}},
{name:'Language: LTR',element:'span',attributes:{dir:'ltr'}},
{name:'Image on Left',element:'img',attributes:{style:'float:left; margin:0 10px 10px 0px;',border:'0',align:'left'}},
{name:'Image on Right',element:'img',attributes:{style:'float:right; margin:0 0 10px 10px;',border:'0',align:'right'}}
]);