FCKeditor - WYSIWYG редактор, который мне нравится
Решила описать процесс установки визуального редактора FCKeditor, так как не нашла на drupal.ru про него ничего вразумительного, а сама я считаю его лучше TinyMCE. Возможно, я покажусь кому-то не правой, но после общения с этим редактором в Joomla!, у меня остался очень неприятный осадок, чего не было с FCKeditor. Итак, в папке с модулем, который можно скачать со страницы проекта лежит файл README.txt. Буду держаться его и в конце добавлю кое-что от себя.
Обзор
Модуль позволяет Drupal заменить текстовые поля редактором FCKeditor. Этот HTML текстовый редактор имеет множество очень мощных функций, как у известного оффлайного редактора Word, только в web. Он относительно мало весит и не требует установки каких-либо программ на компьютере.
Требуемые компоненты
Чтобы пользоваться редактором в drupal, необходимо загрузить его с сайта http://www.fckeditor.net/
Требования
- Drupal 5.x
- PHP 4.3.0 или выше
- FCKeditor 2.3.x или выше (http://www.fckeditor.net/)
Установка и настройка
- Скачайте модуль FCKeditor и загрузите в директорию с модулями (sites/all/modules).
- С официального сайта FCKeditor скачайте сам редактор и скопируйте в директорию sites/all/modules/fckeditor папку под названием fckeditor
- Включите модуль как обычно на странице модулей.
- Назначьте права на использование редактора на странице Админка → Управление пользователями → Контроль доступа.
- Пройдите Админка → Настройки → FCKeditor, создайте профили. В каждом можно выбрать, какие текстовые поля будут заменены редактором. Выберите панель по умолчанию и сделайте другие дополнительные настройки.
- Для того, чтобы работал расширенный текстовый редактор, нужно еще настроить фильтры для пользователей с правом использовать этот редактор.
Либо дайте им разрешение на формат ввода Full HTML, либо используйте следующие теги:
<a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <strike> <caption>
- Чтобы не делать лишние переводы строк (при нажатии на Админка → Настройка → Форматы ввода (рекомендуется). Редактор при нажатии упомянутых кнопок автоматически вставит теги
<p>
и<br />
, поэтому этот фильтр окажется лишним.
и ), нужно отключить фильтр "Преобразователь переводов строки" для выбранного формата ввода нажав на странице - Измените файл fckeditor.config.js под ваши потребности (дополнительно). Вы можете копировать нужные строки из настроек по умолчанию в файле modules/fckeditor/fckeditor/fckconfig.js. Строки в fckeditor.config.js перекроют большинство из них.
Устранение проблем с установкой
Если FCKeditor не показывается, нужно проверить, все ли файлы расположены правильно. Директория /modules/fckeditor/fckeditor/ должна содержать следующие файлы: fckeditor.js, fckconfig.js, fckstyles.xml, fcktemplates.xml и папку editor. Правильная структура директорий такова:
modules
--fckeditor
-----fckeditor.module
-----fckeditor
-------_samples
-------editor
-------COPY_HERE.txt
-------fckconfig.js
-------...
Плагины: "Отделение анонса" и "Разбиение на страницы"
По умолчанию модуль FCKeditor идет с двумя плагинами, которые могут вставлять разделитель анонса(!--break--
) и разделитель страниц (<!--pagebreak-->
) Чтобы использовать pagebreak, нужно сначала скачать, включить модуль paging и разрешить его фильтр для вашего формата ввода.
Можно включить любой (или оба) из них.
- Откройте /modules/fckeditor/fckeditor.config.js и раскомментируйте три строчки:
FCKConfig.PluginsPath = '../../plugins/' ;
FCKConfig.Plugins.Add( 'drupalbreak' ) ;
FCKConfig.Plugins.Add( 'drupalpagebreak' ) ; - Вторым шагом будет добавление кнопки в панель (в том же файле). Кнопки называются: DrupalBreak, DrupalPageBreak.
Например, если у вас массив кнопок определен таким образом:['Image','Flash','Table','Rule','SpecialChar']
Просто добавьте строчку
['Image','Flash','Table','Rule','SpecialChar', 'DrupalBreak', 'DrupalPageBreak']
(помните об одиночных кавычках).
Загрузка изображений и файлов
Есть три способа загрузки файлов: используя встроенный обозреватель файлов, модуль типа IMCE и модуль upload из ядра.
Как включить обозреватель файлов?
Редактор предоставляет конечному пользователю гибкость создания собственного файлового обозревателя, который может быть интегрирован в него.
Встроенный обозреватель дает возможность пользователю просматривать файлы в особой директории на сервере и добавлять в нее новые (создавать папки и загружать файлы).
- Чтобы включить обозреватель, нужно изменить файл настроек соединения:
/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php
(для FCKeditor 2.5+)
или
/modules/fckeditor/fckeditor/editor/filemanager/browser/default/connectors/php/config.php
и
modules/fckeditor/fckeditor/editor/filemanager/upload/php/config.php(для FCKeditor 2.3.x - 2.4.x)
В этих файлах нужно включить обозреватель, добавив одну строчку, которая содержит файл со специальной функцией авторизации для Drupal (filemanager.config.php).
Сразу после этой строки:
$Config['UserFilesAbsolutePath'] = '' ;
Добавьте код:
require_once "../../../../../filemanager.config.php";
(для FCKeditor 2.5+)
или
require_once "D:\\xampp\\htdocs\\drupal5b\\modules\\fckeditor\\filemanager.config.php"
(для FCKeditor 2.3.x - 2.4.x)
Файл config.php еще содержит некоторые другие важные установки, пожалуйста, ознакомьтесь с ним и приведите в соответствие вашим нуждам (дополнительно).
- Для Drupal 5.2 (и выше) требуется также изменить файл settings.php в директории drupal (обычно sites/default/settings.php) и установить переменную $cookie_domain для целевого домена. Если вы этого не сделаете, FCKeditor решит, что файловый обозреватель выключен.
(просто добавьте в этот файл$cookie_domain = 'example.com';
) - Включение возможности загружать файлы – это риск для безопасности. Вот почему вам придется разграничить права доступа, чтобы включить файловый обозреватель для отдельных групп пользователей.
- Наконец, настройте установки обозревателя для каждого профиля.
Модули: Image Assist
Image Assist может быть интегрирован с FCKeditor.
Чтобы сделать это, просто скопируйте файл modules/fckeditor/img_assist_fckeditor.js в папку модуля modules/img_assist/.
Дополнительная информация и лицензия
FCKeditor - Текстовый редактор для Интернета
Copyright (C) 2003-2006 Frederico Caldeira Knabben
Под GNU Lesser General Public License:
http://www.opensource.org/licenses/lgpl-license.php
Для более подробной информации посетите:
http://www.fckeditor.net/
http://drupal.fckeditor.net
----------------------------конец файла README.txt------------------------------------
Мои настройки
Для версии FCKeditor_2.6 и Drupal 5.7
Итак, что мне нужно:
Основные кнопки для
- редактирования,
- загрузки картинок,
- вставки из Word,
- отмены шага и возврата вперед,
- изменения цвета шрифта и фона,
- отмены форматирования...
всем знакомые функции визуального редактора. Поэтому после того, как я создала новый профиль и настроила его, я принялась редактировать файлы:
- Заменила false на true в 30 строке файла /modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php :
$Config['Enabled'] = true ;
- В 34 строке того же файла сократила
userfiles
доfiles
- В 40 строчке написала корень папки files между кавычками:
$Config['UserFilesAbsolutePath'] = '/название/public_html/files/' ;
- Добавила 41 строчку с таким содержимым:
require_once "../../../../../filemanager.config.php";
- 135 и 136 строки я немного видоизменила.
Было:$Config['QuickUploadPath']['Image']= $Config['UserFilesPath'] ;
$Config['QuickUploadAbsolutePath']['Image']= $Config['UserFilesAbsolutePath'] ;Стало:
$Config['QuickUploadPath']['Image']= $Config['UserFilesPath'] .'image/';
$Config['QuickUploadAbsolutePath']['Image']= $Config['UserFilesAbsolutePath'] .'image/';Пояснение:
В этом файле прописаны пути для загрузки картинок, медиа, флеш и обычных файлов.
Я настроила быструю загрузку (с вкладки ) не в директорию files, а в files/image/, чтобы можно было выбрать из этой директории позже, так как при просмотре на сервере в выпадающем списке показывается только files/image/.На этом работа с файлом config.php была закончена.
- Так как для роли, которая редактирует с помощью редактора, я разрешила формат ввода Full HTML, я выбрала для коррекции в файле /modules/fckeditor/fckeditor.config.js самый подходящий набор кнопок - drupalFull. Вот что у меня получилось после расстановки по местам:
FCKConfig.ToolbarSets["DrupalFull"] = [
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough'],
['JustifyLeft','JustifyCenter','JustifyRight'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['Cut','Copy','Paste','PasteText','PasteWord'],
['Source'],
'/',
['Image','Table','Rule','SpecialChar'],
['Link','Unlink','Anchor'],
//uncomment this line to enable teaser break and page break buttons
//remember to load appropriate plugins with FCKConfig.Plugins.Add command a couple of lines below
//['Image','Flash','Table','Rule','SpecialChar','DrupalBreak','DrupalPageBreak'],
['FontFormat','FontName','FontSize'],
['TextColor','BGColor']
] ;Кнопки для отделения анонса и для разбивки на страницы мне не были нужны, поэтому их здесь нет. Вот как это выглядит в трех скинах FCKeditor:
- Потом я настроила вывод некоторых вкладок - в самом низу страницы профиля в поле "Custom javascript configuration" добавила все, что там предлагается:
LinkDlgHideTarget = true ;
LinkDlgHideAdvanced = true ;
ImageDlgHideLink = true ;
ImageDlgHideAdvanced = true ;
FlashDlgHideAdvanced = true ;Таким образом исчезли вкладки
и при загрузке картинок, а и при добавлении ссылок. - Далее мне необходимо было устранить ошибку в браузере, возникающую при быстрой загрузке картинок с вкладки
uncaught exception: Permission denied to get property Window.OnUploadCompleted
Я нашла патч для ее устранения.
Все что нужно это в файле /modules/fckeditor/fckeditor/editor/filemanager/connectors/php/io.php заменить 291 строку на эту:var test = window.parent.OnUploadCompleted ;
: - Знаю еще, что есть способ сделать фон редактора белым независимо от того, каков цвет фона страницы, но пока что мне это не понадобилось.
Далее мне нужно было убрать лишнее и расположить кнопки в 2 ряда красиво.