Статьи о создании и продвижении сайтов, заработке в сети и софте

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

В этой статье мы научимся устанавливать WYSIWYG текстовый редактор на сайт, работающем на CMS Drupal 7.

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

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

Это крайне неудобно. Поэтому нам предстоит установить модули CKEditor и IMCE. Первый модуль позволит нам редактировать текст, а второй модуль позволит загрузить и вставить с сервера различные файлы. Обычно возникает потребность вставить различные картинки.

Данная пошаговая инструкция одна из важнейших при настройки CMS Drupal 7. Установить редактор рекомендуется сразу после локализации, настройки автоматического перевода модулей и ядра сайта, а так же модуля для работы с административным меню.

Для установки WYSIWYG текстового редактора CKEditor и модуля IMCE надо пройти следующие шаги:

1. Установка библиотеки CKEditor.

Для этого идем на официальный сайт редактора, по этому адресу: http://ckeditor.com/download

Здесь скачаем полный пакет редактора:

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

После этого скопируем архив в папку sites/all/libraries (если в папке all еще нет папки libraries, создайте ее).

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

2. Установка модуля CKEditor.

Теперь устанавливаем непосредственно сам модуль CKEditor. Скачать его можно отсюда: https://www.drupal.org/project/ckeditor

Скачаем, устанавливаем и включаем модуль. После этого нашего модуля можно немного понастроить. Для этого идем в «Конфигурация»-«Работа с содержимым»-«CKEditor» и нажимаем на ссылку «изменить» в строке Full HTML. Пока здесь нечего менять, единственное, запомните этот путь,  а так же раздел «Плагины», он вам в дальнейшем еще понадобится. Так же можете понастроить цвета редактора. Дальнейшие настройки понадобятся после установки модуля IMCE.

3. Установка и настройка модуля IMCE.

Скачать модуль IMCE можно скачать отсюда: https://www.drupal.org/project/imce

К слову, вы так же можете установить аналог этого модуля, elFinder file manager, скачать его можно с этого адреса: https://www.drupal.org/project/elfinder

После того, как скачали и установили, откройте «Конфигурация»-«Работа с содержимым»-«CKEditor» нажмите «изменить» в строке Full HTML.

После этого в открывшемся окне открываем вкладку FILE BROWSER SETTINGS и в трех параметрах выбираем IMCE (или elfinder, если вы установили аналог модуля IMCE) и сохраняемся:

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

4. Испытываем только что установленные модули.

Откройте «Содержимое»-«Добавить содержимое»-«Article». Если увидите текстовый редактор, значит все окей. Правда, вы первоначально увидите, что включен формат «Filtered HML». Но вы одним кликом можете переключиться на формат «Full HTML».

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

А теперь, давайте, попробуем загрузить картинку на сервер, а потом установить эту картинку в редактор.

Надо отметить, что вам лучше сразу в папке sites/default/files создать новую папку images и в этой папке создать новые папки по папке для каждой рубрики вашего сайта. Чтобы с самого начала держать в порядке список картинок.

После этого нажите на знак картинки в редакторе:

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

В открывшемся окне нажмите кнопку «Выбор на сервере» и перед вами откроется новое всплывающее окно. Вот тут вы уже можете закачать картинки с вашего компьютера на сервер и вставить нужную картинку в редакторе в любое нужное в место.

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

Как на Друпал сайте установить WYSIWYG текстовый редактор с помощью модулей CKEditor и IMCE?

После всей этой проделанной работы наш редактор и файловый менеджер готовы. Теперь вы можете спокойно редактировать свой текст, а так же закачать нужные картинки.

Вы таким же образом можете изменить настройки модуля CKEditor и для других форматов текста. И если создадите еще один дополнительный формат текста, скажем, для участников форума, то можете настроить внешний вид и разрешенные кнопки редактора и для этого формата. Ничего сложного в этом нет, просто повторяйте вторую часть 2 шага и по желанию можете включить возможность закачки и загрузки файлов, в частности картинок.

Но при работе с текстовым редактором у вас могут появиться проблемы с кодом различных js баннеров. По соображениям безопасности такие потенциально опасные коды по умолчанию расчищаются редактором CKEditor. Решить эту проблему можно прописав в настройках редактора специальный код, разрешающий ввести различные коды. О том, как это делать, я писал в этой статье, ближе к концу статьи. Но это следует разрешить только для того формата текста, с которым может работать только администратор и особо доверенные роли.

И так, вы проделали большую работу, теперь встаньте и попробуйте сделать вот такие движения, отлично бодрит:

Ах да, чуть не забыл, если у вас возникли вопросы по теме, смело задавайте их в комментариях, ответы будем искать вместе.

Комментарии

Аватар пользователя Діма

Яким чином можна поставити цей модуль у текстове поле Зворотній звязок н сторінці Доставка. Розкажи будь-ласка про спосіб

Аватар пользователя Admin

Діма, просто надо дать право незарегистрированным посетителям писать в том формате текста, где разрешено использовать редактор CKEditor. Например, формат Filttred HTML, но никак не Full HTML, ибо этот формат позволяет слишком много, недобросовестные посетители могут попытаться взломать сайт.

Добавить комментарий