FCKeditor и настройка диалогов
FCKeditor — свободный WYSIWYG-редактор,
который может быть использован на веб-страницах. «FCK» в названии
FCKeditor происходят от имени создателя редактора, Frederico Caldeira
Knabben.
Особенностью редактора является малый размер без необходимости инсталляции на стороне клиента.
FCKeditor - это один из самых функциональных и популярных WYSIWYG-редакторов, написанных на JavaScript.
В данной статье речь пойдет об интеграции этого редактора с CMS Drupal, и последующей его настройке. Чтобы не плодить копипаста и лишних букв, сразу дам ссылки на уже написанные другими людьми статьи по теме:
- Установка FCKeditor в Drupal от Vikeng
- Настройка отображения FCKeditor от Vikeng
- Статья по тонкой настройке FCKeditor в среде Drupal 5 (большая часть актуальна и для Drupal 6).
Мои же 7 копеек будут состоять в том, что я расскажу, как изменять интерфейс стандартных диалогов вставки картинок, ссылок, flash-объектов и пр.
Большинство функций FCKeditor`а могут оказаться излишествами, и если с панелью инструментов все более-менее просто и понятно(процесс их персонализации подробно описан в статьях, перечисленных мной выше), то вот всплывающие окна работы с картинками, ссылками и flash-роликами - это уже отдельная тема.
Некоторые их возможности отключаются стандартными опциями в разделе настройки редакора в панели управления Drupal( /admin/settings/fckeditor ), или редактированием файла fckconfig.js или fckeditor.config.js. Но большинство же интерфейсных особенностей этому воздействию не подвержены. Бывает так, что нужно изменить не просто отображение формы вставки ссылки, а саму ее html-разметку.
Тут уже можно попробовать поколдовать с DOM-таблицей с помощью JavaScript, а можно поступить проще, зайдя в каталог fckeditor/editor/dialog модуля FCKeditor, и обнаружив там html-шаблоны самых разнообразных всплывающих диалогов редактора. Тут и форма добавления ссылки в файле fck_link.html, и форма добавления картинки в файле fck_image.html, и множество других форм, названия которых вполне информативны, и дают представление о назначении этих файлов.
Для простоты работы с этими формами рекомендую воспользоваться браузером Firefox и расширением к нему - Firebug, который с новой версии 1.4 заговорил по-русски.
Теперь, открыв в Drupal форму с уже подключенным и настроенным FCKeditor`ом, мы вызываем нужный нам диалог, жмем в инересующем нас месте правой кнопкой мыши, и выбираем пункт "Анализировать элемент". После этого, внизу экрана мы получаем развернутое дерево html-элементов, сфокусированное на нашем элементе, откуда мы уже можем выписать его ID, и ознакомиться с разметкой.
Теперь лезем в html-шаблон этого диалога, находим там элемент с нужным нам ID(вот и удобство: уже не нужно перечитывать сотни строк кода, чтобы подправить пару строчек в html-разметке), и правим его, как душе нашей угодно.
Например, чтобы убрать из диалога вставки картинки поля редактирования границ, обтекания и отступов этой картинки, нужно залезть в файл fckeditor/editor/dialog/fck_image.html , и закомментировать/затереть там строки 98-136. Их html-код приведен ниже:
<br />
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td nowrap="nowrap">
<span fcklang="DlgImgBorder">Border</span> </td>
<td>
<input type="text" size="2" value="" id="txtBorder" onkeyup="UpdatePreview();" /></td>
</tr>
<tr>
<td nowrap="nowrap">
<span fcklang="DlgImgHSpace">HSpace</span> </td>
<td>
<input type="text" size="2" id="txtHSpace" onkeyup="UpdatePreview();" /></td>
</tr>
<tr>
<td nowrap="nowrap">
<span fcklang="DlgImgVSpace">VSpace</span> </td>
<td>
<input type="text" size="2" id="txtVSpace" onkeyup="UpdatePreview();" /></td>
</tr>
<tr>
<td nowrap="nowrap">
<span fcklang="DlgImgAlign">Align</span> </td>
<td>
<select id="cmbAlign" onchange="UpdatePreview();">
<option value="" selected="selected"></option>
<option fcklang="DlgImgAlignLeft" value="left">Left</option>
<option fcklang="DlgImgAlignAbsBottom" value="absBottom">Abs Bottom</option>
<option fcklang="DlgImgAlignAbsMiddle" value="absMiddle">Abs Middle</option>
<option fcklang="DlgImgAlignBaseline" value="baseline">Baseline</option>
<option fcklang="DlgImgAlignBottom" value="bottom">Bottom</option>
<option fcklang="DlgImgAlignMiddle" value="middle">Middle</option>
<option fcklang="DlgImgAlignRight" value="right">Right</option>
<option fcklang="DlgImgAlignTextTop" value="textTop">Text Top</option>
<option fcklang="DlgImgAlignTop" value="top">Top</option>
</select>
</td>
</tr>
</table>
Ну, и далее - в подобном роде.
Вообще, для себя я уловил такой момент, что при решении нетривиальных задач с FCKeditor, официальные доки редко бывают полезны, и приходится самому лезть в код, и во всем последовательно разбираться.
Реклама:
Магазин товаров для уборки швабры
- Статьи схожей тематики:
Создание и использование плагинов FCKeditor
Новый плагин для FCKeditor - scaleimages
Комментарии(0):
rss-лента