Достоинства FCKEditor — открытый код, поддержка и постоянные обновления от компании-разработчика, наличие активного сообщества и мультиплатформенность — вывели его в ряд лидеров среди аналогичных систем. FCKEditor не является CMS-инструментом в привычном смысле этого термина. Скорее это удобный конструктор, ориентированный в первую очередь на создание удобной и функциональной клиентской части редактора сайта. Основные возможности FCKEditor описаны в предыдущей статье. Все они доступны по умолчанию.
Достаточно загрузить архив текущей версии и установить его на свой компьютер. Но, как и большинство решений с открытым кодом, FCKEditor можно модифицировать в соответствии со своими требованиями.
Настройка редактора
Редактор FCKEditor построен по многозвенной объектной модели. Рабочие файлы размещены в папке /edit/ и называются fckeditor.расширение. Например, файл, реализующий редактор полностью на стороне клиента, называется fckeditor.js; ASP — fckeditor.asp; PHP — fckeditor.php и так далее. Файл содержит класс, который создает экземпляр объекта редактора (FCKeditor), и набор служебных функций. Так, FCKeditor_IsCompatibleBrowser определяет тип браузера на клиенте и вызывает соответствующий класс для реализации скриптов. FCKeditor.prototype._HTMLEncode производит замену недопустимых символов (угловых скобок, кавычек), причем список автозамены может пополняться разработчиком. Аналогичная функция в ASP-версии называется ReplaceText. Основное отличие версий для PHP, ASP, CFM от базовой версии для Javascript состоит в реализации функциональности не на клиенте, а на сервере. Сам же состав функциональных возможностей неизменен.
Объектная модель FCKEditor реализована в виде набора javascript-файлов. Их перечень и пути к ним задаются в файле fckpackager.xml. Если вы создадите свой класс в отдельном файле, не забудьте включить путь к нему таким образом:
FCKConfig.ToolbarSets["Default"] = [
["Source", "DocProps", "-", "Save", "NewPage", "Preview", "-", "Templates"],
["Cut", "Copy", "Paste", "PasteText", "PasteWord", "-", "Print", "SpellCheck"],
["Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "RemoveFormat"],
["Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField"],
"/",
["Bold", "Italic", "Underline", "StrikeThrough", "-", "Subscript", "Superscript"],
["OrderedList", "UnorderedList", "-", "Outdent", "Indent"],
["JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyFull"],
["Link", "Unlink", "Anchor"],
["Image", "Flash", "Table", "Rule", "Smiley", "SpecialChar", "PageBreak"],
"/",
["Style", "FontFormat", "FontName", "FontSize"],
["TextColor", "BGColor"],
["FitWindow", "-", "About"]
]
Рис. 1. Состав меню по умолчанию |
В приведенном выше примере показана конфигурация панели меню по умолчанию. Состав доступных пользовательских функций можно посмотреть на
Настройка собственных стилей оформления
Описания стилей панели меню
<style name="Custom Bold" element="span">
<attribute name="style" value="font-weight: bold;" />
</style>
Приведенный фрагмент задает полужирный шрифт, который применяется при выборе bold из выпадающего списка «Тип шрифта» в панели меню. Базовые настройки содержат полужирный, курсив и подчеркнутый. Создав аналогичный узел, можно задать любое другое оформление шрифта: зачеркнутый, индекс, подчеркнутый и прочее. Точно так же создаются узлы для оформления других панелей в меню редактора: графических изображений, размера шрифта, заголовков.
Файл fcktemplates.xml содержит шаблоны структур веб-страниц. В документе по умолчанию содержится три шаблона: «Заголовок с картинкой», «Странный шаблон», содержащий заголовок в левом и основной текст в правом поле, и «Табличное оформление страницы». Шаблон формируется в CDATA, как показано для шаблона «Заголовок с картинкой»:
<Template title="Image and Title" image="template1.gif">
<Description>One main image with a title and text that surround the image.</Description>
<Html>
<![CDATA[
<img style="margin-right: 10px" height="100" alt="" width="100" align="left"/>
<h3>Type the title here</h3>
Type the text here
]]>
</Html>
</Template>
Создавая свои шаблоны, можно существенно ускорить разработку сайтов и уменьшить количество ошибок за счет использования стандартных структур. Поскольку шаблоны создаете вы сами, то и дизайн будет оригинальным, непохожим на разработки других веб-студий.
Рис. 2. Загрузка файла |
Управление загрузкой файлов на сервер
Вставка изображений, флеш-роликов, других файлов возможна только после их загрузки на сервер
Работу редактора FCKEditor можно существенно оптимизировать, загружая только те скрипты, которые реально используются в веб-приложении. Загрузка объектов и их состав определяются в файле fckscriptloader.js. Найдите в нем такой комментарий:
/* ### Scripts Definition List */
Он обозначает начало списка загружаемых объектов. Добавление объекта производится методом
FCKScriptLoader.AddScript("FCKConstants");
Более опытные разработчики могут также воспользоваться API-интерфейсом к редактору FCKEditor, который описан в файле fckeditorapi.js.
В статье мы рассмотрели некоторые наиболее часто востребованные возможности и функции настройки FCKEditor. Многозвенная модель, основанная на открытом коде и файлах настроек и конфигурации, позволит разработчику настроить или доработать представленный редактор для своих целей, интегрировать его в CMS-систему. Недаром FCKEditor сейчас стал одним из самых популярных веб редакторов и в мире, и у нас, в России.
Ссылки по теме
Статья получена: hostinfo.ru