В Drupal 7, как и в шестой версии нет встроенного визуального редактора.

Руководство пользователя: как установить и настроить редактор ckeditor в друпал 7. Загрузка изображений с Elfinder.

В друпал 7, как и в шестой версии, нам нужно установить редактор. Конечно, можно этого не делать и писать тексты, видя только код. Но мне нравятся визуальные редакторы. Напомню, что установку и настройку для друпал 6 мы изучили в уроке 2:

Сегодня мы рассмотрим рабочую связку cms с редактором.
drupal 7.17
CKEditor - WYSIWYG HTML editor 7.x-1.11
CKEditor 4.0
elFinder file manager 7.x-0.7
скрипт elFinder - elfinder-1.2

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

Как установить WYSIWYG редактор CKEditor на последнюю версию CMS Drupal 7.17

CKEditor – это гибкий и удобный редактор. Его интерфейс напоминает ворд.
Сначала устанавливаем скрипт редактора, потом сам модуль. Именно модуль подключит его к сайту.
Примечание.
Я указываю конкретные версии на момент написания статьи.

1. Скачать модуль ]]> https://drupal.org/project/ckeditor ]]>
Архив распакуйте в папку site/all/modules . Весь путь выглядит так: site/all/modules/ckeditor

2. Скачать редактор CKEditor 4.0 ]]> https://ckeditor.com/download ]]>
Для файлов редактора нужно создать папку libraries в site/all/
Путь распаковки архива будет таким: site/all/libraries/ckeditor

На странице модулей включаем, а затем настраиваем.
Идем «Конфигурация - CKEditor - Глобальный профиль CKEditor – Изменить». Здесь нужно проверить запись в поле «Путь к CKEditor» - должно быть %l/ckeditor . Эта запись показывает, что редактор находится в папке libraries .

Все. Вы установили CKEditor и он должен работать. Для проверки попробуйте открыть страницу создания нового материала. Теперь вместо одного большого поля для ввода вы увидите привычный визуальный редактор.

Если редактор не отображается:
Проверьте правильность выбранных релизов модулей для вашей версии друпал. Попробуйте поменять на другой релиз.

Настройка профилей редактора CKEditor

1 шаг. Настройка профиля Advanced в редакторе CKEditor.
Advanced (расширенный, с загрузкой изображений и т. д.)
Идем «Управление > конфигурация > ckeditor - admin/config/content/ckeditor
Настроим профиль Advanced, кликаем ссылку «изменить» напротив профиля Advanced.
Внешний вид редактора (Editor appearance):
Выбираем колор.

Перетаскиваем нужные кнопочки.

Язык выбираем русский.

File browser settings
Выбираем по своему вкусу файловый менеджер, ниже по тексту есть установка и настройка файлового менеджера для друпал 7 – Elfinder.

2 шаг. Настройка профиля Full в редакторе ckeditor
Идем «Управление - конфигурация – ckeditor» - admin/config/content/ckeditor
Оставить настройки можно по умолчанию, выбрать русский язык.

Самый простой вариант использовать Full (полный) и Advanced (расширенный) - для зарегистрированных, также ваши вариации. Создать для анонимных пользователей профиль Plain, где отметить автоматическое изменение html текста в простой формат.

Немного из обзора друпал 7, такой мини положительный отзыв.
В семерке по умолчанию есть поле для загрузки рисунков. Очень полезная фишка. Каждому материалу можно присвоить картинку – своеобразный логотип. В анонсе эта картинка автоматически уменьшится.

Какие проблемы встречаются при работе с редактором CKeditor показывает не все кнопки

Для этого проверьте, какую версию вы скачали на странице https://ckeditor.com/download

• В пакете Basic Package - кнопок мало.
• Standard Package - их больше.
• Полный набор в пакете Full Package - скачивайте его, если хотите задействовать максимум.

Установка и настройка файлового менеджера Elfinder для Drupal 7

Связка из редактора и файлового менеджера сделают вашу работу наиболее приятной. Вы сможете в любое место вставить изображение с сервера или с компьютера. Присвоить ему нужные атрибуты, альтернативное описание. К сожалению и его нужно устанавливать.
Файловый менеджер CKEditor загрузит не только картинки, но и другие файлы.
Как и с редактором, нужно скачать модуль и скрипт.

Скачать модуль ]]> https://drupal.org/project/elfinder ]]>

Распаковать архив и поместить файлы в папку site/all/modules/elfinder

Скачать скрипт ]]> ]]>

Из последних версий подошло elfinder-1.2.
Затем распакуем архив и поместим файлы в папку site/all/libraries/elfinder
Здесь есть небольшая особенность, папку нужно назвать elfinder.

Настраиваем. Для этого идем admin/config/elfinder – «конфигурация – модули – elFinder – настроить».

В «Root directory» оставляем выбор за «Use system defaults» - по умолчанию в друпал.

Установки по умолчанию admin/config/media/file-system:

На страничке «Содержимое» - admin/content, вы увидите новую вкладку «Файлы». Теперь достаточно по ней кликнуть и вы увидите интерфейс файлового менеджера.

И последний шаг – это объединение редактора с файловым менеджером в один функциональный инструмент.
Выше я уже описала настройку профилей редактора.

Повторюсь:
Выбираем в File browser type - elFinder . При желании здесь же можно поменять папку для загрузки файлов.

Теперь все должно работать, а я никак не пойму, почему этого нет в ядре друпал? Вместо этого несколько вариантов редакторов на любой вкус. Что слишком хорошо. ;)

Новая рабочая связка

drupal 7.21
CKEditor - WYSIWYG HTML editor 7.x 1.13
CKEditor - ckeditor_4.1_standard
elFinder file manager 7.x-0.8
скрипт elFinder - elfinder-1.2

Появляется глюк с добавлением новых пустот () при каждом редактировании.

Выявлено, что глюк появляется при вставке тизера друпал. Если в статье не отделять анонс, то глюка нет.

Причина в том, что по умолчанию размер анонса уже настроен в типе материала. Получается двойное использование отделения анонса : ручное и автоматическое.

Путь к настройке показа анонса:

Главная » Администрирование » Structure » Типы содержимого » Article » Управлять отображением

Совет. Следует при настройке внешнего вида визуального редактора убрать кнопочку тизер-друпал в обоих профилях.

Статьи для изучения drupal:

Общие понятия для новичков.

Как русифицировать друпал и модули к нему.

Подборка блоговых модулей.

Краткое руководство.

На своем сайте использовал BUEditor – простой удобный редактор, но для пользователей он не очень удобен. Часто думал поставить CKEditor, но он мне казался каким-то монстром, но на деле все оказалось не так страшно.

Как установить модуль читаем .

После подключения через свой модуль, на странице admin/config/content/ckeditor/edit/назнание_профиля во вкладке ВНЕШНИЙ ВИД РЕДАКТОРА , в разделе Плагины появится чекбокс активации. Включаем, сохраняем, проверяем.

3. Вставка ссылок. Из коробки диалоговое окно вставки ссылок содержит кучу не нужного и не понятного. Заменяем его плагином Simple link . Как устанавить, смотрим в п.2 . Подключаем (см. п.1) :

Config.extraPlugins = "SimpleLink";

Так же появится новая иконка(кнопка) плагина.

4. Вставка изображений. Здесь все тоже самое, что и ссылками, можно поставить плагин Simple Image для вставки изображений по ссылке.

Config.extraPlugins = "SimpleImage";

Или загружать изображения с помощью модуля One Click Upload. . Подробнее читаем . Я остановился на втором способе, хотя в BUEditor’е использовал оба.

Единственное что хочу добавить, плагин Enhanced Image требует еще два плагина Widget и Lineutils .

не мог понять, почему не запускается плагин, пока не заглянул в журнал

5. Внешний вид. По умолчанию используется скин Moono, я же хотел привести внешность к виду BUEditor’а.

так выглядел BUEditor

7. Placeholder. Чтобы добать placeholder устанавливаем плагин (см. п.2) Configuration Helper . Подключаем (см. п.1) :

Config.extraPlugins = "confighelper"; config.placeholder = "Наш текст"; // текст нашего placeholder

8. Смайлы. За смайлы в CKEditor"e отвечает плагин Insert Smiley , он в ходит в стандартный пакет - Full Package.

Так выгледят смайлы из коробки:

Чтобы заменить их на свои необходимо в конфиге(см. п.1) указать путь до папки с изображениями smiley_path :

Config.smiley_path = "/sites/default/files/smileys/";

Прописать имена файлов (изображений), которые будут отображаться smiley_images :

Config.smiley_images = ["smile_1.png","smile_2.png"];

И description (описание при наведении) smiley_descriptions

Config.smiley_descriptions = ["description-1", "description-2"];

Так же можно указат во сколько колонок выводить смайлы (по умолчанию: 8) smiley_columns

Config.smiley_columns = 6;

Вот что у меня получилось

9. Проверка орфографии браузером. Как написал UksusoFF в CKEditor"е отключена браузерная проверка орфографии. Для того, чтобы отключить это отключение (немного тавтологии), необходимо прописать в конфиге:

Config.disableNativeSpellChecker = false;

10. Контекстное меню. В CKEditor"е, при нажатии ПКМ открывается контекстное меню, а не нативное меню браузера

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

Работал я с двумя визуальными редакторами это Tinymce и CK Editor хоть эти два редактора достаточно популярны откровенно скажу, CK Editor мне больше понравился или верней сказать он больше подошел для моих задач. Поэтому здесь мы рассмотрим, как устанавливается именно редактор CK Editor , а я расскажу в другой раз.

Для начала как всегда нам нужно скачать редактор, можно скачать Full – пакет , или выбрать все необходимые пакеты на официальном сайте.

После завершения загрузки распаковываем скаченный архив, например, в папку libs которая находится в корне сайта. В index.html между тегами подключаем плагин редактора ckeditor.js ну и конечно библиотеку jquery .

HTML

И так, остается создать форму с тестовым полем , с которым и будет взаимодействовать наш редактор.

HTML

CKEDITOR.replace("editor1");

В целом по установке все, после загрузки страницы у Вас, в указанном текстовом поле уже должен отобразится текстовый редактор. Данный редактор можно настраивать под свой вкус менять фон рамки редактора или язык, можно задать ширину и высоту окна. Для этого используется файл config.js , который находится в папке libs/ckeditor/ config.js . В этом файле мы можем задать выше перечислимые настройки и многие другие. Подробней на официальном сайте.

Например, с помощью изменений в файле config.js , которые показаны ниже мы изменим язык, цвет рамки и высоту редактора.

JAVASCRIPT

CKEDITOR.editorConfig = function(config) { config.language = "en"; //язык config.uiColor = "#AADC6E"; //цвет рамки config.height = 300; //высота рамки };

Так же можно изменить вид редактора, установив в настройке config.toolbarBasic - минимум или Full - максимум функций редактора. Или же индивидуально настроить редактор с помощью настройки config.toolbar_Basic как показано в примере ниже.

В случае выбора минимальной конфигурации возможности редактора будут ограничены и будут доступны только кнопки: задать жирный текст, наклонный шрифт, списки, создать ссылку удалить ссылку ну и смайлики (пример см. ниже) .

JAVASCRIPT

CKEDITOR.editorConfig = function(config) { config.width = 1050; //ширина окна редактора config.toolbar = "Basic"; //функциональность редактора, Basic-минимум, Full-максимум config.toolbar_Basic = //индивидуальная настройка режима Basic [ ["Bold", "Italic", "-", "NumberedList", "BulletedList", "-", "Link", "Unlink","-","Smiley"] ]; };

Есть возможность группировать кнопки по группам, и снова для этого нужен файл config.js .

JAVASCRIPT

CKEDITOR.editorConfig = function(config) { config.toolbarGroups = [ { name: "document", groups: [ "mode", "document", "doctools" ] }, { name: "clipboard", groups: [ "clipboard", "undo" ] }, { name: "editing", groups: [ "find", "selection", "spellchecker", "editing" ] }, { name: "forms", groups: [ "forms" ] }, "/", { name: "basicstyles", groups: [ "basicstyles", "cleanup" ] }, { name: "paragraph", groups: [ "list", "indent", "blocks", "align", "bidi", "paragraph" ] }, { name: "links", groups: [ "links" ] }, { name: "insert", groups: [ "insert" ] }, "/", { name: "styles", groups: [ "styles" ] }, { name: "colors", groups: [ "colors" ] }, { name: "tools", groups: [ "tools" ] }, { name: "others", groups: [ "others" ] }, { name: "about", groups: [ "about" ] } ]; };

В целом основные настройки текстового редактора показаны, одно что, мне не понравилось это размер этого редактора, после закачки он весит 4м 265кб что как то многовато. Если Вас так же это напрягает, то можно удалить каталог samples а так же почистить каталог с языками так как она и весит больше всех. В ней очень много языков, которые не используются, поэтому попросту можно их удалить и оставить только те, что нужны, например русский и английский.

Заходим в каталог libs/ckeditor/lang и тут удаляем все файлы кроме нужного для вас языка, например, оставляем: ru.js и en.js . После всех проделанных манипуляций размер уменьшится вдвое, а каталог ckeditor будет иметь вид:

На этом у меня все, кто знает другие тонкости данного редактора, пишите в комментариях.