Теги: Редактор FCKEditor

Настраиваем FCKEditor самостоятельно

Достоинства 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. Если вы создадите свой класс в отдельном файле, не забудьте включить путь к нему таким образом: <File path="editor/_source/fckconstants.js" />. Обратите внимание, что для различных типов браузеров формируется собственная объектная модель. Настройка базовых параметров редактора, включая состав панели меню, производится в файле fckconfig.js. Одна из групп включает параметры настройки внешнего вида редактора: отображение границ, всплывающих окон, подсказок. Свойство ToolbarSets устанавливает состав элементов панели меню редактора:

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. Состав меню по умолчанию

В приведенном выше примере показана конфигурация панели меню по умолчанию. Состав доступных пользовательских функций можно посмотреть на рис. 1. Добавляя или удаляя значения в списке, настраиваем панель меню в соответствии с требованиями нашей разработки.

Настройка собственных стилей оформления

Описания стилей панели меню (рис. 1) вынесены в файл fckstyles.xml. Фрагменты описания различных стилей оформления текста приведены ниже.

<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. Загрузка файла

Управление загрузкой файлов на сервер

Вставка изображений, флеш-роликов, других файлов возможна только после их загрузки на сервер (рис. 2). В папке editor\filemanager\upload\ содержится набор папок по каждой используемой технологии: ASP, ASP.NET, PHP, CFM. В каждой папке содержится набор файлов, обеспечивающих настройку и проведение загрузки на сервер. Так, для ASP настройка проводится в файле config.asp, а класс загрузки определен в class_upload.asp; для ASP.NET — в файле upload.asp; PHP — config.php и upload.php соответственно. Для возможности загрузки устанавливаем параметр ConfigIsEnabled = True. Параметр ConfigUserFilesPath = "/userfiles/" определяет папку, в которую по умолчанию будут загружаться файлы. Методы ConfigAllowedExtensions и ConfigDeniedExtensions задают соответственно разрешенные и запрещенные для загрузки типы файлов.

Работу редактора FCKEditor можно существенно оптимизировать, загружая только те скрипты, которые реально используются в веб-приложении. Загрузка объектов и их состав определяются в файле fckscriptloader.js. Найдите в нем такой комментарий:

/* ### Scripts Definition List */

Он обозначает начало списка загружаемых объектов. Добавление объекта производится методом AddScript("имя объекта", параметры объекта). Например, таким образом:

FCKScriptLoader.AddScript("FCKConstants");

Более опытные разработчики могут также воспользоваться API-интерфейсом к редактору FCKEditor, который описан в файле fckeditorapi.js.

В статье мы рассмотрели некоторые наиболее часто востребованные возможности и функции настройки FCKEditor. Многозвенная модель, основанная на открытом коде и файлах настроек и конфигурации, позволит разработчику настроить или доработать представленный редактор для своих целей, интегрировать его в CMS-систему. Недаром FCKEditor сейчас стал одним из самых популярных веб редакторов и в мире, и у нас, в России.