Почему в ckeditor не меняется язык. Установка pluginов в CKEditor. Статическая конфигурация
По моему мнению, CKEditor – один из лучших wysiwyg редакторов для сайтов. Последнее время в нем появилось много зауми для упрощения жизни пользователя, в итоге мешающей, например ACF. Как его редактировать и отключать я уже . Но вернемся к теме нашей статьи как установить плагины на CKEditor.
Я вижу здесь два подхода.
Первый – заходим на сайт редактора и пересобираем CKeditor под себя, включая необходимые для нас плагины. Делается это следующим образом. Заходим на сайт ckeditor.com, переходим на вкладку download. Далее выбираем Or let me customize CKEditor
Но в данном случае отображаются не все плагины. Чтобы включить какие-то новые или особенные плагины в сборку, необходимо собирать свою сборку несколько иначе. Заходим в пункт Add-ons ->Plug-ins и видим справа следующую двигающееся меню
При нажатии на кнопку add to my editor плагин добавляется в сборку. По окончании нажимаем Build my editor и заменяем наш встроенный на сайт редактор сгенерированным.
Второй подход для тех, кому самому интересно поковыряться в коде.
На сайте ckeditor.com переходим в раздел add-ons->plug-ins и нажимаем на необходимом плагине.
Выбираем Download и следуем инструкциям с сайта. В большинстве своем они либо сводятся к тому, что нужно установить зависимости к данному плагину и прописать и сам плагин в поле конфигурационного файла config.js и плагин, от которого зависит устанавливаемый через запятую, например,
Config.extraPlugins = "codemirror,youtube,imagerotate";
В 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.17CKEditor – это гибкий и удобный редактор. Его интерфейс напоминает ворд.
Сначала устанавливаем скрипт редактора, потом сам модуль. Именно модуль подключит его к сайту.
Примечание.
Я указываю конкретные версии на момент написания статьи.
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 и он должен работать. Для проверки попробуйте открыть страницу создания нового материала. Теперь вместо одного большого поля для ввода вы увидите привычный визуальный редактор.
Если редактор не отображается:
Проверьте правильность выбранных релизов модулей для вашей версии друпал. Попробуйте поменять на другой релиз.
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, такой мини положительный отзыв.
В семерке по умолчанию есть поле для загрузки рисунков. Очень полезная фишка. Каждому материалу можно присвоить картинку – своеобразный логотип. В анонсе эта картинка автоматически уменьшится.
Для этого проверьте, какую версию вы скачали на странице https://ckeditor.com/download
- В пакете Basic Package - кнопок мало.
- Standard Package - их больше.
- Полный набор в пакете Full Package - скачивайте его, если хотите задействовать максимум.
Связка из редактора и файлового менеджера сделают вашу работу наиболее приятной. Вы сможете в любое место вставить изображение с сервера или с компьютера. Присвоить ему нужные атрибуты, альтернативное описание. К сожалению и его нужно устанавливать.
Файловый менеджер CKEditor загрузит не только картинки, но и другие файлы.
Как и с редактором, нужно скачать модуль и скрипт.
Распаковать архив и поместить файлы в папку site/all/modules/elfinder
Из последних версий подошло elfinder-1.2.
Затем распакуем архив и поместим файлы в папку site/all/libraries/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"е, при нажатии ПКМ открывается контекстное меню, а не нативное меню браузера
→ WYSIWYG CKeditor
Наверняка многие разработчики как минимум слышали о существовании HTML - редакторов, встраиваемых в веб страницы. Хочу представить Вам пожалуй самый продвинутый на сегодняшний день WYSIWYG . Для непосвященных опишу в двух словах о чем идет речь. Если Вы или Ваши клиенты хотите своими руками редактировать контент сайта, а познавать основы html нет времени или желания - то Ckeditor то что нужно.
Ранее продукт назывался FCKeditor , но из-за нездоровых ассоциаций у англичан связанных с аббревиатурой FCK (создатель проекта Frederico Calderia Knabben ), редактор был переименован в Ckeditor . Кроме названия в новой версии исчезли api для работы с файлами на perl и python , по крайней мере в бесплатном дистрибутиве. Разработчики предлагают несколько тарифных планов по поддержке и возможно на этих условиях вам предоставят не только их. На данный момент по умолчанию есть asp и php . Я же в своей работе использую perl и буду писать интерфейс сам. Позже выложу. А в целом проект имеет плагинную архитектуру, которой довольно легко управлять если разбираетесь в JS .
Скачать WYSIWYG ckeditor можно здесь или на сайте www.ckeditor.com .
Так он собственно выглядит. Правда я вам представил немного урезанную версию, но от полного комплекта почти не отличается.
Подключение и настройка ckeditor Подключение по умолчаниюПодключается и настраивается ckeditor очень легко.
1 . Скачиваем ckeditor и распаковываем в корень сайта, CMS или другой системы. Разработчики не рекомендуют начинающим программистам переименовывать каталоги и файлы во избежание конфликтов в редакторе. Если все оставить как есть то запуск по умолчанию - минутное дело.
2 .В коде страницы грузим основной код и вставляем элемент textarea . Причем элементов textarea может быть несколько, главное им назначить разные идентификаторы.
3 .Инициализация на Ваш вкус, но лучше делать после того как объектная модель документа будет готова.
Для Jquery :
$.noConflict(); jQuery(document).ready(function($) { CKEDITOR.replace("textID",{}); });
Для Ext JS :
Ext.onReady(CKEDITOR.replace("textID",{}));
Древний способ:
Или непосредственно перед закрывающим тегом
CKEDITOR.replace("textID",{});
Дополнительная настройкаДля изменения настроек по умолчанию в ckeditor предусмотрен некоторого рода конфигурационный файл config.js , который лежит по адресу /ckeditor/config.js . Он содержит в себе настроечный хеш.
Вот пример того который используется для демо версии на данной странице:
CKEDITOR.editorConfig = function(config) { config.skin = "kama"; config.uiColor = "#E0E0E0"; config.language = "ru"; config.fullPage = false; config.height = 200; config.removePlugins = "resize,about,save"; };
config.skin - интерфейс. Возможны три варианта: kama , v2 , office2003 . По умолчанию kama .
config.uiColor - цвет интерфейса. Работает только для kama .
config.language - Язык интерфейса.
config.fullPage - оплетка для редактируемого документа. Если установлено true то редактируемая область будет содержать полноценный html документ, если false - только контент.
config.height - высота редактируемой области в пикселах. Аналогично для ширины.
config.removePlugins - Список кнопок (плагинов), которые нужно отключить. Например: resize - это благодаря которой область редактора можно растянуть как угодно, удерживая мышью нижний правый угол, save - кнопка сохранить.
Обычно WYSIWYG редактор требуется когда необходимо написать админку, в которой обычному пользователю не знающему html, будет легко и удобно добавлять собственные тексты. Так было и в моем случае.
Скачиваем CKEditor с официального сайта: скачать ckeditor
Скачиваем бесплатный файл менеджер KCFinder: скачать kcfinder
Стандартным способом интегрируем CKEditor на сайт. Добавляем на страницу скрипт ckeditor.js (в моем случае скрипт лежит в корне сайта в каталоге ckeditor). KCFinder я распаковал в папку ckeditor, просто для удобства.
Пусть на странице имеется поле textarea которое нужно заменить WYSIWYG редактором:
CKEDITOR.replace("ckeditor");
Далее нам необходимо указать настройки в ckeditor для того чтоб при нажатии на кнопку «загрузить файл» или просмотреть файлы на сервере открывался KCFinder, для этого добавляем в CKEDITOR.replace следующие настройки:
CKEDITOR.replace("ckeditor",{"filebrowserBrowseUrl":"/ckeditor/kcfinder/browse.php?type=files", "filebrowserImageBrowseUrl":"/ckeditor/kcfinder/browse.php?type=images", "filebrowserFlashBrowseUrl":"/ckeditor/kcfinder/browse.php?type=flash", "filebrowserUploadUrl":"/ckeditor/kcfinder/upload.php?type=files", "filebrowserImageUploadUrl":"/ckeditor/kcfinder/upload.php?type=images", "filebrowserFlashUploadUrl":"/ckeditor/kcfinder/upload.php?type=flash"});
В каталоге /ckeditor/kcfinder/ есть скрипт с конфигурацией config.php, там необходимо указать путь к папке в которую будут загружаться добавленные файлы (не забудьте посмотреть чтоб директория была доступна для записи).
Кажется что все работает, но есть еще несколько моментов касающихся настроек форматирования кода в CKEditor, мне например не нравится что при нажатии на клавишу enter в редакторе, текст заключается в тег
Так же этот тег постоянно записывается когда пытаемся сохранить пустое поле с подключенным редактором. Чтоб это исправить добавляем небольшой скрипт:
If(typeof CKEDITOR !== "undefined") { CKEDITOR.on("instanceReady", function(ev) { // Output paragraphs as . ev.editor.dataProcessor.writer.setRules("*", { indent: false, breakBeforeOpen: true, breakAfterOpen: false, breakBeforeClose: false, breakAfterClose: true }); }); }
Убрали автозаполнения тегом
Теперь уберем заключение текста в данный тег при нажатии на enter. Для этого допишем следующие настройки в файл конфигурации /ckeditor/config.js :
// при нажатии enter добавляем br config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKEDITOR.ENTER_BR;
Если кажется что последние две строчки кода не помогают решению проблемы, очистите кеш браузера и повторите тестирование, все должно работать. Таким образом ваш редактор CKEditor c файловым менеджером KCFinder готов к работе, и выглядит очень даже не плохо.
Дополнительную информацию по настройке конфигурации можно посмотреть на официальных сайтах редакторов.