В предыдущей статье об этом редакторе я описал процесс инсталляции FCKeditor.

Сегодня ж я расскажу, как настроить внешний вид под свой дизайн. Это абсолютно не претендует на какую-то истину последней инстанции, это всего лишь некая компиляция того, что удалось узнать и настроить методом проб и ошибок (-:

Направляемся прямиком в папку fckeditor\editor\skins\default. Ищем там файл с замысловатым названием fck_editor.css. Вот в нём и будем делать все изменения по внешнему виду редактора. Итак, начнём (-:

Фон редактора… на самом деле почему-то выглядит только как граница:

body
{
padding: 1px;
margin: 0;
background-color: #FFCC00;
}

Изменение области, где находятся пиктограмки:

.TB_ToolbarSet, .TB_Expand, .TB_Collapse
{
cursor: default;
background-color: #FFCC00;
}

Дальше границы рабочей области:

#xEditingArea
{
border: #FF0000 1px solid;
}

Цвет разделителя между пиктограмами:

.TB_Separator
{
width: 1px;
height: 16px;
margin: 2px;
background-color: #999966;
}

А это цвет нажатой кнопки:

.TB_Button_On
{
border: #316ac5 1px solid;
background-color: #00FF00;
}

Цвет кнопки, когда указатель мышки находится над ней:

.TB_Button_On_Over, .TB_Button_Off_Over
{
border: #316ac5 1px solid;
background-color: #FFFF00;
}

Фон надписи в левом верхнем углу «Источник»:

.TB_Button_Off .TB_Button_Text
{
background-color: #00FF00;  /* Needed because of a bug on Clear Type */
}

А вот тут меняется фон надписей «Стиль», «Форматирование», «Шрифт», «Размер»

.SC_FieldCaption
{
overflow: visible;
padding-right: 5px;
padding-left: 5px;
opacity: 0.75; /* Safari, Opera and Mozilla */
filter: alpha(opacity=70); /* IE */ /* -moz-opacity: 0.75; Mozilla (Old) */
height: 23px;
background-color: #FF9900;
}

Теперь ещё несколько штрихов. Кроме цвета есть ещё и размеры (-:

Так вот… чтоб задать размеры рабочей области (все примеры приводятся для javascript):

oFCKeditor.Width = «300″ ; // 300 пикселей

oFCKeditor.Height = «100%» ; // 100 процентов

Так же можно задать сообщение, которое будет в окне редактора после его создания:

oFCKeditor.Value = «<h1>Тест FCKeditor</h1> Это всего лишь тест (-:.» ;

А на последок можно ещё добавить проверку поддержки браузером классов FCKeditor:

oFCKeditor.CheckBrowser = true ;

И запрет вывода ошибок, чтоб не раздражало:

oFCKeditor.DisplayErrors = false ;

Теперь, так сказать, локализация:

oFCKeditor.Config[ "AutoDetectLanguage" ] = false ;
oFCKeditor.Config[ "DefaultLanguage" ] = «ru-RU» ;

Ну вот, пожалуй, и хватит (-: Думаю, что этого перечня настроек вполне хватит для подгона внешнего вида редактора под цветовую гамму вашего дизайна (-:

В одной из следующих публикаций расскажу, как установить и настроить TinyMCE.

Недавние записи

• Long time no see
• Ошибка при обновлении Meteor до версии 1.4.2
• Patch falcon для ruby-1.9.3-p327
• Ускоряем ruby и Rails
• Gem ‘seo_params’: определение основных параметров
• Отрицательный margin-top и Opera
• Rspec and Devise reset password
• Backbone.js: Views. Часть первая.
• Backbone.js: Models and Collections
• Backbone.js Routers