Меню Рубрики

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

Установка и настройка 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 для контент-менеджера

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

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

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

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

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

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

В общем я считаю что нормальный контент-менеджер должен эту грязь вычищать самолично и руками, отлично знать 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, теги, вообще всё вырубается на корню. Пусть контент-менеджер поработает и поправит руками, зато код будет чистый. А там править то смехота.

    источник

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

    Самый простой вариант использовать 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 — как русифицировать друпал и модули к нему.

    источник

    Drupal Русскоязычное сообщество

    Подскажите пожалуйста каким образом можно установить CKEditor 4.6 Full на Drupal 8? Когда я только установил Drupal 8, там был очень скудный CKEditor в «Полный HTML», я добавил все иконки, в итоге полчилось так (прикрепляю изображение), но этого мало т.к. даже цвет шрифта нельзя поменять. Я пытался установить по ссылке с официального сайта так он пишет «Файл ckeditor_4.6.1_full.zip не содержит ни одного файла .info.yml.». Вручную пытался — тоже самое.

    Еще добавил этот модуль дополнительный чтобы можно было цвет менять, все нормально — иконка появляется в «Полном HTML», перетаскиваю ее на редактор в рабочую область, сохраняю, и потом когда захожу редактировать материал то он вообще не загружается — ни HTML-редактора, ни набранного текста. Выбираю «Базовый» или «Ограниченный» т.е. где без этого доп. модуля, то нормально загружается. И это проблема не конкретно с этим модулем, я попробовал несколько модулей разных и таже самая проблема.

    Но мне не хотелось бы возиться с каждым модулем, а просто тупо поставить CKEditor 4.6 Full на Drupal 8? Можно ли этого сделать? Если да, то как? Если нет, то что посоветуете чтобы исправить ошибку с модулями. Сайт пока не в интернете а дома на OpenServer так что навенро не в правах доступа проблема.

    p.s. c Друпал недавно пользую, если что прошу не пинать сильно)

    Лучший ответ

    В общем с неработающим CKEditor разобарался: плагины надо складывать в папку «сайт\libraries». А я складывал как в старых инструкциях написано «сайт\core\modules\ckeditor\plugins», поэтому и не работало.

    Комментарии

    Как вы можете поставить СКедитор, если он уже есть в ядре? Только фильтровать сопутствующие на орге и пытаться исправить ситуацию, инсталлом новых плюшек.

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

    В 8 этого я не нашел. Вообще посмотрел много видео, в 8 много изменений сделали и этот CKEditor еще в ядро непонятно зачем влепили. И раньше ведь у CKKeditor была отдельная версия для Drupal, а сейчас все общее.

    В общем с неработающим CKEditor разобарался: плагины надо складывать в папку «сайт\libraries». А я складывал как в старых инструкциях написано «сайт\core\modules\ckeditor\plugins», поэтому и не работало.

    А у Вас с модулем Imce File Manager для CKEditor проблем не было?

    У меня с ним такая проблема: скачал, подключил модуль, кнопку IMCE в панель Full HTML для CKEditor перетащил, сохранил. Вроде бы IMCE работает, при нажатии на иконку позволяет загружать картинки с хоста, но!
    ! Раньше у IMCE была такая функция.

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

    Не позволяет редактировать место размещения картинки внутри текста!

    img.align-left <
    width:200px;
    height:auto;
    float:left;
    margin-right:10px;
    margin-top:10px;
    >
    Исключительно ради тебя))
    Но мне такое без нужды и я его убрал из css
    Ещё момент, если у тебя для тега p стоит overflow:hidden ( у меня он был) , то его надо будет убрать, так как картинка выводится в этом теге и поток просто очистится и картинка будет смещена влево, а текст её не обтечёт.

    p.s. У меня сейчас другая боль, которую я не знаю как решить. Все стили уже перерыл с лупой . Эх.
    У меня чек-боксы отображаются без лейбла. Ставлю бартик- все хорошо, удаляю все стили с темы- тож самое.
    Sorry за офф) наболело
    http://www.drupal.ru/node/128542#comments

    Кто — нибудь не мог бы подробно расписать процесс расширения (подключения доп.плагинов) функций CKEditor?

    1) Дело в том, что скачал из сайта CKEditor полную версию, содержимое сверху залил на: *.*/core/modules/ckeditor. После этого произошел крах CKEditor, пришлось по новой переустанавливать Drupal 8. Что не так?
    2) Как активизировать в Drupal такую функцию, чтоб была возможность выбора шрифтов? Или эта функция по умолчанию в полной версии?
    3) Дополнительные плагины для CKEditor , как я понял, надо скидывать в папку *.*/core/modules/ckeditor/plugins. Так?
    То есть, если я плагин Enhanced Image закину туда, то проблема «обтекания» рисунков текстом должна быть решена?
    Но когда я папку /image2 скачанного плагина Enhanced Image заливаю в папку *.*/core/modules/ckeditor/plugins, то ничего не происходит: ни дополнительная кнопка, которую можно было бы активизировать, не появляется, ни «автоматом» эта функция не активизируется!

    GoldenLion, по поводу 3)
    Плагины все же надо в libraries, а модули в modules. Эти две папки в корне сайта, если нет то надо создать. Я перепутал, сейчас отредактировал пост.

    Блиииин. Проблема не решена, я случайно нажал не на ту кнопку))

    GoldenLion, по поводу 3)

    Плагины все же надо в libraries, а модули в modules.

    Щас стать счастливым обладателем Восьмёрки может:

    3. Высококвалифицированный программист.

    4. Человек не боящийся смелых творческих экспериментов (это я про себя, так как все предыдущие категории ко мне не относятся)

    Enhanced Image — это модуль или плагин?!

    Enhanced Image — это модуль или плагин?!

    В Семёрке с этого сайта мы обычно берём библиотеку СКедитора, сам модуль СКедитор — на орге.
    Инфы именно по Enhanced Image я на орге особо не нарыл, хотя озадачивался два раза минут по 15.

    Вы — засланный казачок? И по первой инструкции вашей, и по второй попробовал. В первый раз хоть негативных последствий не было, а во второй, когда в корень сайта, в папку libraries, разместил плагин image2, все рухнуло!

    Почитал я про Enhanced Image. В общем, на drupal org написано так:
    «Drupal 8
    I’m working on it and pretty sure that you can use my module right after Drupal 8 releases
    Drupal 8 has its own image plugin and supports center align. Let takes a look on that. »
    «. This module has not been ported to Drupal 8. Refer to this issue to find out its progress. »
    то есть, как я понял, на доработку этого модуля для Drupal 8 просто напросто «забили»

    источник

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

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

    Adblock
    detector