Установка визуального редактора CKEditor на Drupal 7.

image

16.12.11
Comments 21

Привет всем моим читателям и гостям блога, сегодняшний урок будет посвящен установке визуального текстового редактора на Drupal 7. Визуальный редактор для сайта вещь необходимая даже для тех вебмастеров которые считают себя гуру HTML верстки, потому что вручную форматировать большое количество текста для веб страничек очень нудно и долго.

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

Для того чтобы осуществить задуманное нам потребуется установить следующие модули:

  • Модуль Ckeditor, это расширение необходимо для того чтобы интегрировать текстовый редактор.
  • Сам редактор Ckeditor, скачивать его будете не с drupal.org, а с сайта его разработчиков.
  • Модуль IMCE, этот модуль служит нам для удобства загрузки и вставки изображений непосредственно из текстового редактора.

Итак, давайте приступим. Для начала нам необходимо скачать и установить все наши модули на сервер. Вот на этом месте повнимательнее прошу вас, в папку /sites/all/modules/ переместите модули CKeditor (модуль, а не сам редактор), и модуль IMCE, затем в папку /sites/all/modules/ CKeditor/ вставляем сам текстовый редактор, у вас должен получиться следующий путь /sites/all/modules/ CKeditor/ CKeditor/. Все файлы на месте, теперь можем приступать к настройке.

Установка. Заходим в панель администрирования вашего сайта, и выбираем пункт «Модули», включите установленные модули «Ckeditor» и «IMCE». В принципе текстовый редактор установлен, нам только остается настроить загрузку файлов и изображений через модуль  IMCE. Для этого переходим в раздел «Конфигурация» на верхней панели администрирования и выбираем пункт «CKeditor», отредактируем профиль « Full»

визуальный редактор

, в настройках профиля отредактируем пункт «FILE BROWSER SETTINGS (Настройки обзора файлов)».

File browser type (Link dialog) - IMCE (тип файлового браузера для ссылок)

File browser type (Image dialog) - IMCE (тип файлового браузера для изображений)

File browser type (Flash dialog) - IMCE (тип файлового браузера для flash)

CKEditor

Нажимаем сохранить настройки. Теперь вы можете вставлять картинки в текст непосредственно из текстового редактора, давайте убедимся в этом. Попробуйте добавить материал, только выберите формат ввода «FULL HTML», потому что настраивали мы именно его, и попробуйте вставить картинку.

CKEditor

Как видите у нас появилась кнопка загрузки изображений.

CKEditor

Нажмите ее, если у вас после этого в редакторе отображаются не буквы а каракули, не стоит переживать, это всего лишь небольшая проблема с кодировкой, которую легко устранить, для этого нужно открыть файл .htacess в корневой папке нашего сайта, и в самом конце добавить строку:  AddDefaultCharset UTF-8.

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

Tags: 

Комментарии

DivaDii 24.04.12

Я уже рыдаю!
И на Друпал.ру смотрела...
Может быть, Вы мне поможете.

Сайт на Друпал 7.
Создала тип материала.
В этом типе - слепляет абзацы в кучу.
Никак не могу победить.
На Страницах и в Статьях - нормально делит. А в этом созданном типе - ну хоть убейся!

В Форматах текста Фильтры - включала / отключала десятки раз.
Ничего не помогает.

По вот этой Вашей статье установила CKeditor. (СПАСИБО за материал!)
Надеялась, что поможет.
CKeditor явно работает нормально. Вставляет div, br, p, nbsp - вижу это в кнопке "Источник"

Но потом абзацы все равно слеплены в кучу.

Хоть Full HTML, хоть Filtered HTML

admin 24.04.12

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

DivaDii 24.04.12

Вот, например, такая страница:

newfraza.ru/node/790

Это уже после установки CKEditor'a.

А до его установки:
newfraza.ru/node/285

Причем, сейчас я смотрю код этих страниц.
Там почему-то тэгов абзаца (p или br) вообще нету. Хотя на самом деле - они там есть.

На Друпал.ру советуют добавлять побольше абзацев.
Хоть 80 штук добавляю - результат один и тот же. Абзацы слеплены в один. Хоть пятнадцать абзацев вставляю - не помогает.
Во всех других местах - абзацы работают, как надо.

admin 24.04.12

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

Владимир 22.04.13

Проблема в плагинах. Ситуация с невставляемыми тегами абзаца и разрыва строк возникает при попытке набрать в эдитор побольше плагинов. Соответственно, при построении дистрибутива лучше не добавлять те плагины, которые не нужны (или же вообще брать версии попроще - basic или standart).

Евгений 12.09.13

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

feniks-ul 10.05.12

Если при нажатии в IMCE "Выбор на сервере" у Вас появляються крябозябры то всего лишь необходимо отредактировать файл imce-page.tpl.php добавив в него строчку <?php header('Content-type: text/html; charset=utf-8')?>, так как с файлом .htacess не всегда помогает.

Вячеслав 11.05.12

Наконец-то решение! Десятки форумов и НИКТО! не помог, а тут...;0
Спасибо!

Гость 03.06.12

Большое спасибо, наконец разобрался!

Полина 14.06.12

Подскажите, а как вставленную картинку по центру выровнять? Редактор не позволяет выравнивание по центру.

admin 14.06.12

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

Витек 19.06.12

А что делать если когда ты в редакторе картинку добавляешь все хорошо ее видно, как только нажимаешь сохранить и переходишь просто в просмотр картинки как не бывало(((

admin 19.06.12

Внизу редактора есть опция «Формат  ввода», ток вот, тебе нужно выбирать формат ввода «Full HTML».

Витек 19.06.12

все равно такая же фегня(((

admin 19.06.12

Попробуй без редактора в исходном коде картинку прописать, если не будет отображаться, значит проблема всетаки в формате ввода, может тего img у тебя запрещен.

Витек 19.06.12

Да все я нашел ощибку там в настройках было

Витек 19.06.12

Спасибо за помощь! есть еще добрые люди)

Леонид 01.09.12

СKEditor у меня есть, но я не могу настроить IMCE, так как в конфигурациях у меня он не отражается (CKEditor). Только IMCE. И что мне делать?

Миша 08.03.13

Большое спасибо за статью!

Дмитрий 20.06.13

Спасибо огромное..., статья помогла!

Nelya 02.11.13

спасибо! все получилось!

Комментировать