Меню Рубрики

Установка ckeditor для друпал

Установка и настройка ckeditor в Drupal 7

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

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

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

Сегодня мы рассмотрим рабочую связку 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
Оставить настройки можно по умолчанию, выбрать русский язык.

Читайте также:  Установка poi speedcams на navitel

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

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

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

CKeditor показывает не все кнопки

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

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

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

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

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

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

  1. Настраиваем. Для этого идем 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

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

) при каждом редактировании.

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

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

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

Читайте также:  Установка расширителей лыж для снегохода

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

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

Выбор версии и установка drupal — как русифицировать друпал и модули к нему.

источник

Установка и настройка CKEditor в Drupal 7

Настраиваем CKEditor, чтобы редакторы не пачкали разметку.

В Drupal ниже 8 версии (которая скоро выйдет в бету), по-умолчанию нету никаких WYSIWYG редакторов, что как бы заставляет новичка впасть в недоумение. Разумеется народ ищет модули с редакторами, и почему-то, чаще всего попадают на модуль wysiwyg, но он уныл, реально, ввиду того что он поддерживает 100500 редакторов, он работает черт пойми как. Сколько я его пробовал, никак не могу с ним ничего толкового сделать. Да и куда вам 100500 редакторов текста?

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

Установка CKEditor

  1. Заходим на сайт CKEditor выбираем “Full version” и качаем архив.
  2. На ftp сайта заходим в /sites/all/libraries (если последней нету, просто создайте) и скидываем туда нашу папку ckeditor из архива.
  3. Скачиваем, устанавливаем и включаем модуль CKEditor.

Настраиваем CKEditor для Filtered HTML

  1. В админке заходим: admin/config/content/ckeditor и жмем “Edit” у Advanced.
  2. В “Basic setup” должен быть выбран “Filtered HTML” или иной, который используется у вас для ввода с ограничением по тегам.
  3. Переходим в “Editor Appearance” и в разделе toolbar жмем “basic”. Это поставит нам базовый набор элементов.

Для фула я не буду писать, по сути тоже самое, только очевидные изменения будут в пункте №3.

Там куча, уйма настроек: цвет редактора, оформление (замена css) и многое-многое другое. Я же остановлюсь на очень любопытной опции про HTML.

Настройка CKEditor для контент-менеджера

Контент — неотъемлемая составляющая сайта. Им можно сделать из сайта конфетку, даже если сам сайт не очень, и наоборот, если сайт конфетка, сделан профи, то его легко можно превратить в говно одним лишь контентом, что обычно и делают владельцы сайтов или нанятые ими контент-менеджеры.

Контент-менеджер — головная боль для разработчиков, и “вирус” для сайта.

В общем ад начинается когда неопытные контент-менеджеры начинают копировать текст из документа и в тупую вставлять в редактор, а затем сейв, они то думают так: “Вроде как и в ворде”.

А то что там идет целый букет таких вот вещей:

Инлайн стили, классы, обертки, шрифты намертво прописаны. А гнать то будут на разработчиков, как обычно… Тип а что у нас шрифты во всех статьях разные, а что эти шрифты у меня работают а у друга нет (когда в ворде заюзали нестандартный для систем шрифт) и т.д., я думаю многие это ощутили на себе.

Читайте также:  Установка прицепного для рав 4

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

В общем я считаю что нормальный контент-менеджер должен эту грязь вычищать самолично и руками, отлично знать HTML и тогда всё будет в порядке, но такие — настоящая находка, поэтому я сейчас расскажу как рубил руки идиотам.

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

  1. Переходим на страницу создания нового формата: admin/config/content/formats/add
  2. Называем, например: Редактирование содержимого (content_editing)
  3. Даём права кому нужно. У меня, как правило, контент-менеджер это целая роль с запретами на всё что их руки зачешутся сломать.
  4. По сути они часто юзают вставку картинок и прочего, поэтому рубить им html нельзя. Единственные фильтры что я включаю: 1. Convert line breaks into HTML (i.e.
    and

)

  • Convert URLs into links
  • Correct faulty and chopped off HTML
  • Всё, дальше бремя мы скинем на CKEditor.

    1. Заходим в настройки CKEditor: admin/config/content/ckeditor
    2. Создаем новый профиль.
    3. В “Basic setup” даём ему соответствующее название и выбираем созданный нами формат ввода.

    1. Переходим во вкладку “Editor Appereacne” и загружаем “Basic” (им опасно давать что-то больше этого).
    2. В разделе “Cleanup and output” надо подправить “Font formats” — это те теги, что они смогут выбирать в качестве стиля, я делаю так: p;h2;h3;h4;h5;h6 — т.е. убираем div, address, pre и h1. Иначе они и ими нагадят. Я считаю что больше для текста ничего им давать не нужно. Основные заголовки и параграф — всё.

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

    Я и сам пользуюсь таким редактором, ведь это удобно. Просто для себя я еще выношу кнопочку “Источник” чтобы я мог напрямую править html, по необходимости.

    Для особо одаренных

    Бывают такие что и в таком варианте умудряются запоганить, поэтому в настройках CKEditor в разделе “Advanced options” включим “Force pasting as plain text” — т.е. что бы вы не вставляли в данный редактор, он его перегонит в обычный текст. Весь CSS, теги, вообще всё вырубается на корню. Пусть контент-менеджер поработает и поправит руками, зато код будет чистый. А там править то смехота.

    источник

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

    Adblock
    detector