Установка и настройка визуального редактора на сайте: TinyMCE или FCKeditor?

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

Был написан и отлажен скрипт администрирования страницы (html-код из <textarea> на странице админки сохранялся в определенное место страницы — редактировалось основное содержание страницы без меню, шапки и прочего).

Дело оставалось за малым (как казалось) — прикрутить к форме администрирования визуальный редактор. Что же из этого вышло?

Установка и настройка TinyMCE

Сначала я попытался установить редактор TinyMCE. Это получилось, правда не без дополнительных заморочек.

Например, в TinyMCE нет встроенной загрузки изображений, поэтому приходится либо загружать картинки куда-нибудь и прописывать в TinyMCE урл картинки, либо устанавливать дополнительный плагин. Из всех плагинов для загрузки картинок в TinyMCE, что я перерыл за несколько дней и пытался устанавливать, однозначно рекомендую TinyBrowser. Про установку TinyBrowser можно почитать здесь.

Еще одно затруднение, которое может возникнуть: как сделать русификацию TinyMCE. На официальном сайте немного непонятно, где именно скачать файлы русификации для TinyMCE. Делаем так: открываем страницу с языковыми фалами, находим «Russian», но не нажимаем на ссылку «XML», а ставим галочку слева, после этого в самом низу страницы нажимаем «Downloads». Скачанный архив с языковыми файлами надо распаковать поверх существующих папок в папке tiny_mce.

После установки оказалось, что TinyMCE безбожно перевирает html-код, удаляет из него то, что надо и вставляет в него какую-то свою неведомую хрень. В итоге, TinyMCE был удален, а вместо него прикручен редактор FCKeditor.

Итог: редактор TinyMCE устанавливать не рекомендую.

Установка и настройка FCKeditor (CKeditor)

Установить редактор FCKeditor (как, впрочем, и TinyMCE) довольно просто. Вот краткая инструкция по установке и настройке FCKeditor.

1) Скачиваем архив с редактором FCKeditor с официального сайта. Заливаем файлы из архива на сайт.

2) Создаем файл admin.php, содержащий форму:

<form method=”post” action=”">
<textarea name=”test” id=”test”>Редактируемый текст</textarea>
<script type=”text/javascript” src=”/fckeditor/fckeditor.js”></script> // указываем путь к fckeditor.js
<script type=”text/javascript”>
var oFCKeditor = new FCKeditor(”test”); // привязка к textarea с id=”test”
oFCKeditor.ToolbarSet=”Default”; // число кнопочек на инструментальной панели (для полного набора кнопочек оставьте Default)
oFCKeditor.BasePath=”/fckeditor/”; //путь к fckeditor
oFCKeditor.ReplaceTextarea(); // вставка текста из textarea с id=”test”
</script>
<input type=”submit” value=”Сохранить” />
</form>

3) Открываем файл admin.php — все должно работать!

Теперь про то, как настроить редактор FCKeditor.

Для настройки размеров <textarea> с редактируемым текстом измените параметры в файле fckeditor.js:

this.Width = width || ‘100%’ ; //ширина
this.Height = height|| ‘500′ ; // высота
this.ToolbarSet = toolbarSet || ‘Default’ ; // используемый набор кнопок

Чтобы настроить загрузку изображений в FCKeditore, делаем следующее.

1) Открываем файл fckeditor/editor/filemanager/upload/php/config.php

Ищем строчку
$Config[’Enabled’] = false ;
заменяем ее на
$Config[’Enabled’] = true ;

2) Находим и заменяем строку

$Config[’UserFilesPath’] = ‘/userfiles/’ ;
на
$Config[’UserFilesPath’] = ‘/images/’ ; // адрес папки, где вы храните картинки

На папку, куда вы будете заливать картинки, должны быть выставлены соответствующие права (обычно 0777).

3) Открываем файл fckeditor/fckconfig.js.

Находим и меняем строки
var _FileBrowserLanguage = ‘asp’ ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = ‘asp’ ; // asp | aspx | cfm | /admin/article/edit/9~nocache107442#~nocache800576lasso | php

на
var _FileBrowserLanguage = ‘php’ ;
var _QuickUploadLanguage = ‘php’ ;

В этом же файле проверьте наличие строки:

FCKConfig.ImageUpload = true ;

Не забывайте, что функция Upload не закрыта авторизацией. Поэтому, чтобы обезопасить себя, переименуйте директорию FCKeditor во что-нибудь оригинальное.

Теперь загрузка изображений в вашем FCKeditor должна работать.

Какие еще есть моменты в настройке FCKeditor?

Подключение плагина tablecommands для FCKeditor

Скорее всего вы захотите подключить плагин tablecommands для работы с таблицами (удалить/добавить строку/столбец и т.п.). Как это сделать?

Скачивать плагин tablecommands не надо, он уже должен быть у вас в папке editor/plugins. Плагин подключается очень просто. В файл fckeditor/fckconfig.js надо добавить строку:

FCKConfig.Plugins.Add(’tablecommands’); // подключаем tablecommands

Потом в этом же файле найти переменную FCKConfig.ToolbarSets[”Default”] и дописать туда:

[’Table’,'-’,'TableInsertRowAfter’,'TableDeleteRows’,'TableInsertColumnAfter’, ‘TableDeleteColumns’,'TableInsertCellAfter’,'TableDeleteCells’,'TableMergeCells’, ‘TableHorizontalSplitCell’,'TableCellProp’]

После этого на панели FCKeditor должны появиться кнопки для работы с таблицами.

Вот, собственно, и все. Желаю успехов!