FCKeditor - WYSIWYG редактор, который мне нравится

fckeditorРешила описать процесс установки визуального редактора 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/)

Установка и настройка

  1. Скачайте модуль FCKeditor и загрузите в директорию с модулями (sites/all/modules).
  2. С официального сайта FCKeditor скачайте сам редактор и скопируйте в директорию sites/all/modules/fckeditor папку под названием fckeditor
  3. Включите модуль как обычно на странице модулей.
  4. Назначьте права на использование редактора на странице Админка → Управление пользователями → Контроль доступа.
  5. Пройдите Админка → Настройки → FCKeditor, создайте профили. В каждом можно выбрать, какие текстовые поля будут заменены редактором. Выберите панель по умолчанию и сделайте другие дополнительные настройки.
  6. Для того, чтобы работал расширенный текстовый редактор, нужно еще настроить фильтры для пользователей с правом использовать этот редактор.
    Либо дайте им разрешение на формат ввода 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>
  7. Чтобы не делать лишние переводы строк (при нажатии на enter и shift+enter), нужно отключить фильтр "Преобразователь переводов строки" для выбранного формата ввода нажав настроить на странице Админка → Настройка → Форматы ввода (рекомендуется). Редактор при нажатии упомянутых кнопок автоматически вставит теги <p> и <br />, поэтому этот фильтр окажется лишним.
  8. Измените файл 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 и разрешить его фильтр для вашего формата ввода.
Можно включить любой (или оба) из них.

  1. Откройте /modules/fckeditor/fckeditor.config.js и раскомментируйте три строчки:

    FCKConfig.PluginsPath = '../../plugins/' ;
    FCKConfig.Plugins.Add( 'drupalbreak' ) ;
    FCKConfig.Plugins.Add( 'drupalpagebreak' ) ;

  2. Вторым шагом будет добавление кнопки в панель (в том же файле). Кнопки называются: DrupalBreak, DrupalPageBreak.
    Например, если у вас массив кнопок определен таким образом:

    ['Image','Flash','Table','Rule','SpecialChar']

    Просто добавьте строчку

    ['Image','Flash','Table','Rule','SpecialChar', 'DrupalBreak', 'DrupalPageBreak']

    (помните об одиночных кавычках).

Загрузка изображений и файлов

Есть три способа загрузки файлов: используя встроенный обозреватель файлов, модуль типа IMCE и модуль upload из ядра.

Как включить обозреватель файлов?

Редактор предоставляет конечному пользователю гибкость создания собственного файлового обозревателя, который может быть интегрирован в него.

Встроенный обозреватель дает возможность пользователю просматривать файлы в особой директории на сервере и добавлять в нее новые (создавать папки и загружать файлы).

  1. Чтобы включить обозреватель, нужно изменить файл настроек соединения:

    /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 еще содержит некоторые другие важные установки, пожалуйста, ознакомьтесь с ним и приведите в соответствие вашим нуждам (дополнительно).

  2. Для Drupal 5.2 (и выше) требуется также изменить файл settings.php в директории drupal (обычно sites/default/settings.php) и установить переменную $cookie_domain для целевого домена. Если вы этого не сделаете, FCKeditor решит, что файловый обозреватель выключен.
    (просто добавьте в этот файл $cookie_domain = 'example.com';)
  3. Включение возможности загружать файлы – это риск для безопасности. Вот почему вам придется разграничить права доступа, чтобы включить файловый обозреватель для отдельных групп пользователей.
  4. Наконец, настройте установки обозревателя для каждого профиля.

Модули: 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,
  • отмены шага и возврата вперед,
  • изменения цвета шрифта и фона,
  • отмены форматирования...

всем знакомые функции визуального редактора. Поэтому после того, как я создала новый профиль и настроила его, я принялась редактировать файлы:

  1. Заменила false на true в 30 строке файла /modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php :
    $Config['Enabled'] = true ;
  2. В 34 строке того же файла сократила userfiles до files
  3. В 40 строчке написала корень папки files между кавычками:
    $Config['UserFilesAbsolutePath'] = '/название/public_html/files/' ;
  4. Добавила 41 строчку с таким содержимым:
    require_once "../../../../../filemanager.config.php";
  5. 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 была закончена.

  6. Далее мне нужно было убрать лишнее и расположить кнопки в 2 ряда красиво.

  7. Так как для роли, которая редактирует с помощью редактора, я разрешила формат ввода 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:

  8. Скины редактора fckeditor
  9. Потом я настроила вывод некоторых вкладок - в самом низу страницы профиля в поле "Custom javascript configuration" добавила все, что там предлагается:

    LinkDlgHideTarget = true ;
    LinkDlgHideAdvanced = true ;
    ImageDlgHideLink = true ;
    ImageDlgHideAdvanced = true ;
    FlashDlgHideAdvanced = true ;

    Таким образом исчезли вкладки Ссылка и Расширенный при загрузке картинок, а Цель и Расширенный при добавлении ссылок.

  10. Далее мне необходимо было устранить ошибку в браузере, возникающую при быстрой загрузке картинок с вкладки Закачать:
    uncaught exception: Permission denied to get property Window.OnUploadCompleted

    Я нашла патч для ее устранения.
    Все что нужно это в файле /modules/fckeditor/fckeditor/editor/filemanager/connectors/php/io.php заменить 291 строку на эту:

    var test = window.parent.OnUploadCompleted ;

  11. Знаю еще, что есть способ сделать фон редактора белым независимо от того, каков цвет фона страницы, но пока что мне это не понадобилось.