WYSIWYG в подробностях
Давайте вспомним, о чем мы вели разговор в первой части обзора, ведь она была опубликована давно (см. КГ №38, 2006 г.) и, полагаю, многими уже забыта. Говорили мы о WYSIWYG-редакторах — т.е. средствах визуального редактирования. Как один из самых популярных был рассмотрен редактор TinyMCE. Второй, сегодняшний, участник обзора FCKeditor представляет собой не менее удачное решение WISYWYG. Многое познается в сравнении, не так ли? Поэтому сегодня я постараюсь отметить те отличительные особенности FCKeditor'а, которыми не обладает TinyMCE.
FCKeditor
Разработчик: Frederico Caldeira Knabben & team
Лицензия: LGPL, CDL
Сайт поддержки: www.fckeditor.net
Совместимость с браузерами: IE 5.5+, Firefox 1.0+, Mozilla 1.3+, Netscape 7+
Размер дистрибутива: 0,5 Mb/2,8 Mb
Preview & интеграция
Если у вас нет никакого представления о FCKeditor'е, обратитесь к официальному сайту www.fckeditor.net, раздел "DEMO". Там вы можете изучить FCKeditor в демонстрационном режиме. Доступно несколько вариантов отображения редактора в зависимости от выбранных настроек. Собственно, выбор таков:
1) Sample 01: отображает редактор в наиболее функциональном его варианте;
2) Sample 02: Multi-language support — возможность смены языка интерфейса;
3) Sample 03: Toolbar selection с возможностью смены панели инструментов;
4) Sample 04: Skins support с возможностью смены шаблонов.
И вот тут обратим внимание на совместимость редактора с браузером. Как нам всем ни жаль, Opera остается в стороне.
Для более детального ознакомления с FCKeditor'ом нам, естественно, понадобится раздобыть дистрибутив (на момент обзора это была версия 2.3.2). По адресу www.fckeditor.net/download доступен архив размером в полмегабайта. Это не так уж много, если учесть, что в состав данного архива входят 52 языковых файла, занимающих целых 30% от общего объема. Распакуйте архив в подходящую директорию. Без промедления давайте разберемся со структурой содержимого пакета. Видим 3 папки:
1) _samples: включает в себя файлы, необходимые для знакомства с функциями редактора и его интеграционными возможностями, которые, кстати сказать, широки: ASP, ASP.Net, PHP, ColdFusion, Java, Perl, Active-FoxPro, Python и Lasso. Заодно можно проверить и то, как работает на сервере интерпретатор или интерпретаторы, если их несколько;
2) _testcasesHit: примеры вывода данных для обработки с помощью кнопки "Save" (функция 'Submit'), только под ASP;
3) editor: содержание папки составляет наибольшую важность. Это те файлы, которые впоследствии будут подвергаться активному изменению. Теперь для большего удобства поступим так: переместим папку editor в корневую директорию локального хоста (localhost) и там же создадим файл edit.php.
- edit.php -
<?php
include("FCKeditor/fckeditor.php") ;
?>
<html>
<head>
<title>FCKedsitor — Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="savedata.php" method="post">
<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = '/FCKeditor/';
$oFCKeditor->Create() ;
?>
<br>
<input type="submit" value="Save">
</form>
</body>
</html>
- edit.php -
Этот файл будет отвечать за интеграцию с сайтом. Я описал самый распространенный вариант с PHP, но все способы, перечисленные выше, также доступны. Хотя на данном моменте имеют место определенные трудности, поскольку разработчики FCKeditor'a не снабдили архив программы документацией. В то же время, хорошей подсказкой послужат упомянутые примеры из директории _samples. А уже разбор исходного кода не составит значительной проблемы.
Рабочее место: что новенького?
Теперь, когда FCKeditor интегрирован, можно приступать к изучению его функциональных особенностей. Безусловно, важнейшие особенности будут обнаружены на этапе изучения важнейших внутренних составляющих, но сейчас они проявятся и в процессе взаимодействия с редактором. Давайте запустим FCKeditor. Поскольку действия происходят на localhost'е при запущенном сервере, то путь укажем соответствующий, "динамический", — "localhost/edit.php". Появилось окно WISYWYG, как и следовало ожидать, внешне напоминающее TinyMCE: те же функциональные клавиши, элементы и кнопка Save…
Однако не спешите с выводами. К примеру, вот отличия, которые удалось обнаружить мне:
Момент №1. Большинство новых клавиш, как видим, предназначены для вставки форм.
Момент №2. Появилась интересная кнопка под названием "Шаблоны страницы". При внимательном осмотре содержимого редактора был обнаружен еще и файл fcktemplates.xml, содержащий HTML-код этих шаблонов. Придерживаясь следующей структуры, возможно добавить и свой:
<Template title="Заголовок" image="файл изображения — напр., descr.gif">
<Description>описание</Description>
<Html>
HTML-код шаблона
</Html>
</Template>
Момент №3. Все-таки разработчики FCK понимали, что использование pop-up-окон — не лучший шаг в сторону удобства. Поэтому некоторые операции — такие, как выбор фона и цвета текста, а также просмотр кода — не вызывают всплывающее окно, а действуют в текущем.
Наводим порядок
Первым делом рекомендую ознакомиться с конфигурационным файлом под названием fckconfig.js. Он расположен в корневой директории. В TinyMCE, если помните, чего-либо подобного не было (настройки мы определяли в интеграторе edit.html). Fckconfig.js же включает в себя все параметры, влияющие на работу редактора. Комментариев там самый минимум, что связано с тем, что пояснять понятное нечего: свойство каждого параметра заключается в его названии. Разумеется, я не стану приводить описание каждой строки из Fckconfig.js, а только выделю самое интересное, а-ля Tips & Tricks:).
Локализация
В FCKeditor'е она осуществляется путем редактирования следующих строк конфигурационного файла:
FCKConfig.AutoDetectLanguage = true ; //автосмена языка в зависимости от региональных настроек
FCKConfig.DefaultLanguage = 'ru' ; //принудительное изменение языка (если AutoDetectLanguage = false)
Внимание! Если вы работаете в FireFox, то после обновления содержимого файлов FCKeditor'а обязательно очистите кэш (сочетание клавиш 'Shift+Ctrl+R' (или "Удалить личные данные")). В случае с IE Explorer можно обойтись перезапуском или комбинацией 'Ctrl + F5'. Только после этих действий изменения войдут в силу.
Смена шаблона
Интерфейс редактора поддерживает "шкуры", и вы можете выбрать наиболее приглянувшуюся из них (см. html/sample05.html в примерах папки _samples).
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;
Данная строка в конфиг-файле отвечает за шаблон. Альтернативы, впрочем, почти и нет: Default, Office2003 и Silver да плюс малочисленные поделки на sourceforge.net/tracker/?group_id=75348&atid=740153.
Если же вы захотите примерить собственно сделанную "шкуру" на FCKeditor, вам окажет содействие такая команда в конфиг-файле:
$oFCKeditor->Config['SkinPath'] = '/MySkin/' ;
или — как вариант — в файле интеграции (edit.php):
FCKConfig.SkinPath = '/MySkin/' ;
Команда служит для изменения пути размещения skin'а. Вообще этот путь ({SkinPath}) для надежности рекомендуется выносить за пределы каталога редактора — вдруг по ошибке удалите ценный шаблон при непредвиденных обстоятельствах!
Изменяем внешний вид текстового поля
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
Стиль body файла Fck_editorarea.css определяет внешность текстовой области WYSIWYG, а также цвет, тип и размер шрифта.
Настройка панели инструментов.
Сходно с TinyMCE панель FCKeditor'а поддается настройке. Внутри FCKConfig.js вы наверняка заметили раздел FCKConfig.ToolbarSets. Вернее, подобных разделов два, однако при желании можно добавить еще несколько своих вариантов. Структура ToolbarSet'ов довольно проста. В квадратные скобки [ ] заключаются группы кнопок. Сепараторы (разделители) обозначаются как '-', принудительный перенос панели на следующую строку — '/'. Ну, а кнопки выбираются в зависимости от предпочтений.
Добавление стилей текста
Наблюдаем довольно странную ситуацию. Дело в том, что все параметры выпадающего меню Стиль панели инструментов FCKeditor хранит в xml-формате (fckstyles.xml). Различия со структурой CSS см. в таблице 1.
Таблица 1
1. Формат CSS
. my_style_1
{
font-family: 'Trebuchet MS', 'Lucida Grande';
font-weight: bold;
font-size: 19px;
color: #333;
}
2. То же на языке XML
<Style name="my_style_1" element="span">
<Attribute name="style" value="font-family: 'Trebuchet MS', 'Lucida Grande';
font-weight: bold; font-size: 19px; color: #333;" />
Примерно таким образом вы должны прописывать дополнительные стили в xml-файл. Впрочем, есть выбор — например, использовать плагин DynamicCSS. О нем я расскажу чуть далее.
Настройка менеджера файлов
Вставка изображений в FCKeditor'е благодаря модулю Filemanager организована на приемлемом уровне. Правда, по умолчанию загрузка данных на сервер отключена, а сам менеджер сконфигурирован под ASP. Что ж, исправим упущение, поскольку наш виртуальный сервер знает только PHP. Открываем config.php по адресу filemanager/browser/default/connectors/php/ и смотрим, присутствуют ли там следующие настройки (если нет — выставляем):
$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/UserFiles/' ;
Точно такие же параметры выставьте и в filemanager/upload/php/config.php. UserFiles — это директория, в которой будет находиться /image с картинками. Вообще, кроме image, еще есть папки file, flash и media. Их CHMOD (права доступа) должны быть 777. Третий момент — смотрим файл fckconfig.js:
var _FileBrowserLanguage = 'php' ;
var _QuickUploadLanguage = 'php' ;
Таким образом мы указали тип сценария и коннектор, используемый FCKeditor'ом. Ограничить доступ к загрузке тех или иных файлов можно командами:
FCKConfig.(Image/Flash/Link)UploadAllowedExtensions = "gif|swf|jpeg|png"; // выбираем один из вариантов в скобках для разрешения загрузки. FCKConfig.(Image/Flash/Link)UploadDeniedExtensions = "" ;
Кнопка 'Save'
Наверное, о ее назначении вы могли только догадываться, ведь изначально никакой полезной функции она не исполняет. На самом деле, основное предназначение кнопки 'Save' (или 'Сохранить' на панели инструментов) — вывод данных из формы редактирования на выход. Важную роль в процессе вывода играет файл savedata.php, которого в комплекте WYSIWYG нет. Создайте его самостоятельно и поместите в корневую папку FCKeditor'а.
- savedata.php —
<?php
$sValue = stripslashes($_POST['FCKeditor1']); // считываем данные из формы
echo $sValue; // выводим полученное
?>
- savedata.php —
Кстати, средствами PHP можно организовать еще и отправку/прием отредактированного текста в/из СУБД. Эта возможность реализована во всех CMS- движках, поддерживающих FCKeditor по умолчанию либо с помощью модулей (примером тому — Mambo, Drupal).
Уменьшение размера
Знакомство с редактором начинается не с подобных операций, потому второстепенную информацию я и вынес напоследок. Уменьшить — не значит урезать. Мы просто избавим FCKeditor от лишнего, чтобы по компактности он не отставал от TinyMCE. Итак, по желанию удаляем:
1) language-файлы из editor\lang и оставляем на выбор английский и русский;
2) папку samples с примерами интеграции и testcases;
3) лишние шаблоны из editor\skins;
4) папку editor\_source с js-исходниками;
5) файлы, не исполняемые на сервере (по причине отсутствия интерпретатора). Например, если вы используете исключительно PHP, убирайте *.afp-, *.aspx-, *.asp-, *.py-, *.lasso-, *.cfc-, *.cfm- и *.pl-скрипты. Удобнее всего в Total Commander (www.ghisler.com) запустить поисковик (клавиши Alt+F7), задать параметры поиска и затем вынести найденные файлы на панель и удалить их;
6) неиспользуемые коннекторы (editor\filemanager\browser\default\connectors);
7) лишние изображения, в т.ч. смайлы (editor\images\smiley\msn);
8) незадействованные плагины (editor\plugins);
9) файл _whatsnew.html, содержащий справочную информацию.
Дополнения
Большинство дополнений к FCKeditor'у вы найдете на портале Sourceforge (см. ссылки). Их не очень много, если сравнивать с предыдущим обозреваемым WYSIWIG. Другое дело, что многие функции в FCKeditor'е присутствуют изначально, а не в качестве модуля. Плагины в папке plugins, однако, тоже служат для вполне конкретных целей. Скачивая дополнения, обязательно обратите внимание на описание их установки и настройки. Последующих "разборок" не миновать все равно:).
Альтернативный менеджер файлов Mcpuk
Самое важное отличие от стандартного файл-менеджера — способность Mcpuk удалять/переименовывать каталоги/файлы.
Установка:
1) cкопируйте дистрибутив по адресу filemanager/browser/default/
2) в конфиге fckconfig.js замените все строки
filemanager/browser/default
на
filemanager/browser/mcpuk
DynamicCSS.0.4
Плагин упрощает работу с каскадными стилями. Dynamic CSS понимает не .xml-файлы (как задумано в FCKeditor'е по умолчанию), а именно .css-. Действует он следующим образом. Согласно Readme, вы устанавливаете плагин и редактируете файл fck_editorarea.css, добавляя в него свои стили. На панели инструментов после этого должно появиться выпадающее меню CSS. Выделив отрывок текста, вы с легкостью можете применить к нему какой угодно стиль.
Realtime Spellchecker (Firefox 2.0)
Один из немногих удачных spellcheck-плагинов. PS использует средства проверки браузера Mozilla Firefox, поэтому и русский, и английский языки поддаются проверке орфографии. Проверочный словарь вполне реально изменить "под себя", открыв файл {Firefox}\dictionaries\ru.dic. Кодировка — KOI8-R, учтите.
AA Inline Style Editor
Плагин-редактор встроенных стилей документа. Диалоговое окно состоит из 7 разделов, каждый из которых заведует определенными стилевыми свойствами: это Text, Background, Block, Box, Border, List, Positioning. В нижней части окна — предосмотр.
EasyUpload
Согласно названию, основная и единственная задача плагина — упростить загрузку данных на сервер. Разумеется, не без участия FCKeditor'а. Выбираете объект закачки, придумываете ему заголовок — и готово. Плагин EasyUpload взаимодействует с файл-менеджером редактора, поэтому такие параметры, как var _QuickUploadLanguage и FCKConfig.Link(Image)UploadURL, конфига для него действительны.
Flash
Альтернатива стандартному плагину. Различий почти что нет, кроме нескольких дополнительных опций: смена позиции Flash-ролика, качество, масштаб и фоновый цвет.
CleanUp
Предназначение "метлы" — очистка HTML-кода от пустых, лишних тегов, атрибутов, пробелов и т.п. Сам процесс нагляден, т.е. вы сами выбираете, что удалять, а что нет.
Заключение
FCKeditor — совершенный и функциональный WYSIWYG-редактор. Его смело можно рекомендовать и для использования в web-приложениях, и автономно. Набор возможностей аналогичен TinyMCE, но, тем не менее, у FCKeditor'а есть и свои достояния — в частности, использование шаблонов документа, встроенный менеджер файлов и изображений, "продвинутая" интеграция и др. Из минусов — отсутствие поддержки браузера Opera и сложности в конфигурировании редактора.
Ссылки
сайт — документация к FCKeditor'у;
сайт
сайт — FCKeditor на Sourceforge: дополнения и изменения, решение проблем;
сайт и сайт — альтернативные файл-менеджеры для WISYWIG;
сайт — моя сборка FCKeditor'а.
Илья Муравьев, ilyuha.org.ua
FCKeditor
Разработчик: Frederico Caldeira Knabben & team
Лицензия: LGPL, CDL
Сайт поддержки: www.fckeditor.net
Совместимость с браузерами: IE 5.5+, Firefox 1.0+, Mozilla 1.3+, Netscape 7+
Размер дистрибутива: 0,5 Mb/2,8 Mb
Preview & интеграция
Если у вас нет никакого представления о FCKeditor'е, обратитесь к официальному сайту www.fckeditor.net, раздел "DEMO". Там вы можете изучить FCKeditor в демонстрационном режиме. Доступно несколько вариантов отображения редактора в зависимости от выбранных настроек. Собственно, выбор таков:
1) Sample 01: отображает редактор в наиболее функциональном его варианте;
2) Sample 02: Multi-language support — возможность смены языка интерфейса;
3) Sample 03: Toolbar selection с возможностью смены панели инструментов;
4) Sample 04: Skins support с возможностью смены шаблонов.
И вот тут обратим внимание на совместимость редактора с браузером. Как нам всем ни жаль, Opera остается в стороне.
Для более детального ознакомления с FCKeditor'ом нам, естественно, понадобится раздобыть дистрибутив (на момент обзора это была версия 2.3.2). По адресу www.fckeditor.net/download доступен архив размером в полмегабайта. Это не так уж много, если учесть, что в состав данного архива входят 52 языковых файла, занимающих целых 30% от общего объема. Распакуйте архив в подходящую директорию. Без промедления давайте разберемся со структурой содержимого пакета. Видим 3 папки:
1) _samples: включает в себя файлы, необходимые для знакомства с функциями редактора и его интеграционными возможностями, которые, кстати сказать, широки: ASP, ASP.Net, PHP, ColdFusion, Java, Perl, Active-FoxPro, Python и Lasso. Заодно можно проверить и то, как работает на сервере интерпретатор или интерпретаторы, если их несколько;
2) _testcasesHit: примеры вывода данных для обработки с помощью кнопки "Save" (функция 'Submit'), только под ASP;
3) editor: содержание папки составляет наибольшую важность. Это те файлы, которые впоследствии будут подвергаться активному изменению. Теперь для большего удобства поступим так: переместим папку editor в корневую директорию локального хоста (localhost) и там же создадим файл edit.php.
- edit.php -
<?php
include("FCKeditor/fckeditor.php") ;
?>
<html>
<head>
<title>FCKedsitor — Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="savedata.php" method="post">
<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = '/FCKeditor/';
$oFCKeditor->Create() ;
?>
<br>
<input type="submit" value="Save">
</form>
</body>
</html>
- edit.php -
Этот файл будет отвечать за интеграцию с сайтом. Я описал самый распространенный вариант с PHP, но все способы, перечисленные выше, также доступны. Хотя на данном моменте имеют место определенные трудности, поскольку разработчики FCKeditor'a не снабдили архив программы документацией. В то же время, хорошей подсказкой послужат упомянутые примеры из директории _samples. А уже разбор исходного кода не составит значительной проблемы.
Рабочее место: что новенького?
Теперь, когда FCKeditor интегрирован, можно приступать к изучению его функциональных особенностей. Безусловно, важнейшие особенности будут обнаружены на этапе изучения важнейших внутренних составляющих, но сейчас они проявятся и в процессе взаимодействия с редактором. Давайте запустим FCKeditor. Поскольку действия происходят на localhost'е при запущенном сервере, то путь укажем соответствующий, "динамический", — "localhost/edit.php". Появилось окно WISYWYG, как и следовало ожидать, внешне напоминающее TinyMCE: те же функциональные клавиши, элементы и кнопка Save…
Однако не спешите с выводами. К примеру, вот отличия, которые удалось обнаружить мне:
Момент №1. Большинство новых клавиш, как видим, предназначены для вставки форм.
Момент №2. Появилась интересная кнопка под названием "Шаблоны страницы". При внимательном осмотре содержимого редактора был обнаружен еще и файл fcktemplates.xml, содержащий HTML-код этих шаблонов. Придерживаясь следующей структуры, возможно добавить и свой:
<Template title="Заголовок" image="файл изображения — напр., descr.gif">
<Description>описание</Description>
<Html>
HTML-код шаблона
</Html>
</Template>
Момент №3. Все-таки разработчики FCK понимали, что использование pop-up-окон — не лучший шаг в сторону удобства. Поэтому некоторые операции — такие, как выбор фона и цвета текста, а также просмотр кода — не вызывают всплывающее окно, а действуют в текущем.
Наводим порядок
Первым делом рекомендую ознакомиться с конфигурационным файлом под названием fckconfig.js. Он расположен в корневой директории. В TinyMCE, если помните, чего-либо подобного не было (настройки мы определяли в интеграторе edit.html). Fckconfig.js же включает в себя все параметры, влияющие на работу редактора. Комментариев там самый минимум, что связано с тем, что пояснять понятное нечего: свойство каждого параметра заключается в его названии. Разумеется, я не стану приводить описание каждой строки из Fckconfig.js, а только выделю самое интересное, а-ля Tips & Tricks:).
Локализация
В FCKeditor'е она осуществляется путем редактирования следующих строк конфигурационного файла:
FCKConfig.AutoDetectLanguage = true ; //автосмена языка в зависимости от региональных настроек
FCKConfig.DefaultLanguage = 'ru' ; //принудительное изменение языка (если AutoDetectLanguage = false)
Внимание! Если вы работаете в FireFox, то после обновления содержимого файлов FCKeditor'а обязательно очистите кэш (сочетание клавиш 'Shift+Ctrl+R' (или "Удалить личные данные")). В случае с IE Explorer можно обойтись перезапуском или комбинацией 'Ctrl + F5'. Только после этих действий изменения войдут в силу.
Смена шаблона
Интерфейс редактора поддерживает "шкуры", и вы можете выбрать наиболее приглянувшуюся из них (см. html/sample05.html в примерах папки _samples).
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;
Данная строка в конфиг-файле отвечает за шаблон. Альтернативы, впрочем, почти и нет: Default, Office2003 и Silver да плюс малочисленные поделки на sourceforge.net/tracker/?group_id=75348&atid=740153.
Если же вы захотите примерить собственно сделанную "шкуру" на FCKeditor, вам окажет содействие такая команда в конфиг-файле:
$oFCKeditor->Config['SkinPath'] = '/MySkin/' ;
или — как вариант — в файле интеграции (edit.php):
FCKConfig.SkinPath = '/MySkin/' ;
Команда служит для изменения пути размещения skin'а. Вообще этот путь ({SkinPath}) для надежности рекомендуется выносить за пределы каталога редактора — вдруг по ошибке удалите ценный шаблон при непредвиденных обстоятельствах!
Изменяем внешний вид текстового поля
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
Стиль body файла Fck_editorarea.css определяет внешность текстовой области WYSIWYG, а также цвет, тип и размер шрифта.
Настройка панели инструментов.
Сходно с TinyMCE панель FCKeditor'а поддается настройке. Внутри FCKConfig.js вы наверняка заметили раздел FCKConfig.ToolbarSets. Вернее, подобных разделов два, однако при желании можно добавить еще несколько своих вариантов. Структура ToolbarSet'ов довольно проста. В квадратные скобки [ ] заключаются группы кнопок. Сепараторы (разделители) обозначаются как '-', принудительный перенос панели на следующую строку — '/'. Ну, а кнопки выбираются в зависимости от предпочтений.
Добавление стилей текста
Наблюдаем довольно странную ситуацию. Дело в том, что все параметры выпадающего меню Стиль панели инструментов FCKeditor хранит в xml-формате (fckstyles.xml). Различия со структурой CSS см. в таблице 1.
Таблица 1
1. Формат CSS
. my_style_1
{
font-family: 'Trebuchet MS', 'Lucida Grande';
font-weight: bold;
font-size: 19px;
color: #333;
}
2. То же на языке XML
<Style name="my_style_1" element="span">
<Attribute name="style" value="font-family: 'Trebuchet MS', 'Lucida Grande';
font-weight: bold; font-size: 19px; color: #333;" />
Примерно таким образом вы должны прописывать дополнительные стили в xml-файл. Впрочем, есть выбор — например, использовать плагин DynamicCSS. О нем я расскажу чуть далее.
Настройка менеджера файлов
Вставка изображений в FCKeditor'е благодаря модулю Filemanager организована на приемлемом уровне. Правда, по умолчанию загрузка данных на сервер отключена, а сам менеджер сконфигурирован под ASP. Что ж, исправим упущение, поскольку наш виртуальный сервер знает только PHP. Открываем config.php по адресу filemanager/browser/default/connectors/php/ и смотрим, присутствуют ли там следующие настройки (если нет — выставляем):
$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/UserFiles/' ;
Точно такие же параметры выставьте и в filemanager/upload/php/config.php. UserFiles — это директория, в которой будет находиться /image с картинками. Вообще, кроме image, еще есть папки file, flash и media. Их CHMOD (права доступа) должны быть 777. Третий момент — смотрим файл fckconfig.js:
var _FileBrowserLanguage = 'php' ;
var _QuickUploadLanguage = 'php' ;
Таким образом мы указали тип сценария и коннектор, используемый FCKeditor'ом. Ограничить доступ к загрузке тех или иных файлов можно командами:
FCKConfig.(Image/Flash/Link)UploadAllowedExtensions = "gif|swf|jpeg|png"; // выбираем один из вариантов в скобках для разрешения загрузки. FCKConfig.(Image/Flash/Link)UploadDeniedExtensions = "" ;
Кнопка 'Save'
Наверное, о ее назначении вы могли только догадываться, ведь изначально никакой полезной функции она не исполняет. На самом деле, основное предназначение кнопки 'Save' (или 'Сохранить' на панели инструментов) — вывод данных из формы редактирования на выход. Важную роль в процессе вывода играет файл savedata.php, которого в комплекте WYSIWYG нет. Создайте его самостоятельно и поместите в корневую папку FCKeditor'а.
- savedata.php —
<?php
$sValue = stripslashes($_POST['FCKeditor1']); // считываем данные из формы
echo $sValue; // выводим полученное
?>
- savedata.php —
Кстати, средствами PHP можно организовать еще и отправку/прием отредактированного текста в/из СУБД. Эта возможность реализована во всех CMS- движках, поддерживающих FCKeditor по умолчанию либо с помощью модулей (примером тому — Mambo, Drupal).
Уменьшение размера
Знакомство с редактором начинается не с подобных операций, потому второстепенную информацию я и вынес напоследок. Уменьшить — не значит урезать. Мы просто избавим FCKeditor от лишнего, чтобы по компактности он не отставал от TinyMCE. Итак, по желанию удаляем:
1) language-файлы из editor\lang и оставляем на выбор английский и русский;
2) папку samples с примерами интеграции и testcases;
3) лишние шаблоны из editor\skins;
4) папку editor\_source с js-исходниками;
5) файлы, не исполняемые на сервере (по причине отсутствия интерпретатора). Например, если вы используете исключительно PHP, убирайте *.afp-, *.aspx-, *.asp-, *.py-, *.lasso-, *.cfc-, *.cfm- и *.pl-скрипты. Удобнее всего в Total Commander (www.ghisler.com) запустить поисковик (клавиши Alt+F7), задать параметры поиска и затем вынести найденные файлы на панель и удалить их;
6) неиспользуемые коннекторы (editor\filemanager\browser\default\connectors);
7) лишние изображения, в т.ч. смайлы (editor\images\smiley\msn);
8) незадействованные плагины (editor\plugins);
9) файл _whatsnew.html, содержащий справочную информацию.
Дополнения
Большинство дополнений к FCKeditor'у вы найдете на портале Sourceforge (см. ссылки). Их не очень много, если сравнивать с предыдущим обозреваемым WYSIWIG. Другое дело, что многие функции в FCKeditor'е присутствуют изначально, а не в качестве модуля. Плагины в папке plugins, однако, тоже служат для вполне конкретных целей. Скачивая дополнения, обязательно обратите внимание на описание их установки и настройки. Последующих "разборок" не миновать все равно:).
Альтернативный менеджер файлов Mcpuk
Самое важное отличие от стандартного файл-менеджера — способность Mcpuk удалять/переименовывать каталоги/файлы.
Установка:
1) cкопируйте дистрибутив по адресу filemanager/browser/default/
2) в конфиге fckconfig.js замените все строки
filemanager/browser/default
на
filemanager/browser/mcpuk
DynamicCSS.0.4
Плагин упрощает работу с каскадными стилями. Dynamic CSS понимает не .xml-файлы (как задумано в FCKeditor'е по умолчанию), а именно .css-. Действует он следующим образом. Согласно Readme, вы устанавливаете плагин и редактируете файл fck_editorarea.css, добавляя в него свои стили. На панели инструментов после этого должно появиться выпадающее меню CSS. Выделив отрывок текста, вы с легкостью можете применить к нему какой угодно стиль.
Realtime Spellchecker (Firefox 2.0)
Один из немногих удачных spellcheck-плагинов. PS использует средства проверки браузера Mozilla Firefox, поэтому и русский, и английский языки поддаются проверке орфографии. Проверочный словарь вполне реально изменить "под себя", открыв файл {Firefox}\dictionaries\ru.dic. Кодировка — KOI8-R, учтите.
AA Inline Style Editor
Плагин-редактор встроенных стилей документа. Диалоговое окно состоит из 7 разделов, каждый из которых заведует определенными стилевыми свойствами: это Text, Background, Block, Box, Border, List, Positioning. В нижней части окна — предосмотр.
EasyUpload
Согласно названию, основная и единственная задача плагина — упростить загрузку данных на сервер. Разумеется, не без участия FCKeditor'а. Выбираете объект закачки, придумываете ему заголовок — и готово. Плагин EasyUpload взаимодействует с файл-менеджером редактора, поэтому такие параметры, как var _QuickUploadLanguage и FCKConfig.Link(Image)UploadURL, конфига для него действительны.
Flash
Альтернатива стандартному плагину. Различий почти что нет, кроме нескольких дополнительных опций: смена позиции Flash-ролика, качество, масштаб и фоновый цвет.
CleanUp
Предназначение "метлы" — очистка HTML-кода от пустых, лишних тегов, атрибутов, пробелов и т.п. Сам процесс нагляден, т.е. вы сами выбираете, что удалять, а что нет.
Заключение
FCKeditor — совершенный и функциональный WYSIWYG-редактор. Его смело можно рекомендовать и для использования в web-приложениях, и автономно. Набор возможностей аналогичен TinyMCE, но, тем не менее, у FCKeditor'а есть и свои достояния — в частности, использование шаблонов документа, встроенный менеджер файлов и изображений, "продвинутая" интеграция и др. Из минусов — отсутствие поддержки браузера Opera и сложности в конфигурировании редактора.
Ссылки
сайт — документация к FCKeditor'у;
сайт
сайт — FCKeditor на Sourceforge: дополнения и изменения, решение проблем;
сайт и сайт — альтернативные файл-менеджеры для WISYWIG;
сайт — моя сборка FCKeditor'а.
Илья Муравьев, ilyuha.org.ua
Компьютерная газета. Статья была опубликована в номере 08 за 2007 год в рубрике soft
