Ckeditor установка. Установка pluginов в CKEditor
В 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:
Общие понятия для новичков.
Как русифицировать друпал и модули к нему.
Подборка блоговых модулей.
Краткое руководство.
Обычно 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 готов к работе, и выглядит очень даже не плохо.
Дополнительную информацию по настройке конфигурации можно посмотреть на официальных сайтах редакторов.
Сегодня разберемся, как интегрировать и настроить очень популярный редактор контента CKEditor в стандартное приложение ASP.NET MVC. Также установим и настроим не менее популярный менеджер файлов CKFinder.Официальная страница разработчика: https://ckeditor.com/
CKEditor - это очень популярный на сегодняшний день визуальный WYSIWYG редактор HTML-содержимого.
CKFinder - это менеджер файлов, который позволяет получить доступ к файловой системе на сервере и управлять файлами из браузера клиента.
Обычно оба этих компонента идут в связке, то есть менеджер файлов интегрируется в редактор.
CKEditor представлен в двух версиях. Версия 4 как более ранняя и, соответственно, более распространенная. И версия 5, новая, реализующая модульную архитектуру, с множеством нововведений.
Настройка CKEditorЯ в своих проектах использую 4-ую версию, ее функционала вполне хватает для решения любых задач. Скачаем архив с редактором и добавим его себе в проект.
Добавить CKEditor очень просто. Это происходит в несколько этапов:
} document.addEventListener("DOMContentLoaded", function (event) { var editor = CKEDITOR.replace("content1"); });
Все готово! В приведенном выше примере CKEditor подключается к текстовой области "content1" внутри HTML-формы. Далее содержимое этого поля будет отправлено на сервер.
Стоит отметить, что для CKEditor существует множество плагинов, который расширяют его стандартный функционал. Также плагины можно писать самому (более подробно этот процесс описывается в официальной документации на сайте). Давайте добавим к редактору плагин, который позволяет встраивать на страницу видео с видеохостинга Youtube.
На момент написания статьи все плагины можно найти в отдельном разделе на сайте. Интересующий нас плагин находится по адресу: https://ckeditor.com/cke4/addon/youtube
После этого на панели инструментов редактора появится новая кнопка, позволяющая работать с новым плагином.
Теперь разберемся с менеджером файлов CKFinder . Так как файлы (например, картинки) у нас располагаются на сервере, то помимо подключения этого компонента на клиенте, то есть в браузере пользователя, нам также будет необходимо настроить его со стороны сервера, а конкретно подключить некоторые библиотеки и реализовать несколько методов.
Официальная документация по настройке коннектора для ASP.NET приложений находится по адресу: https://ckeditor.com/docs/ckfinder/ckfinder3-net/
В отличии от редактора CKEditor, который мы настраивали на сайте и скачивали вручную, CKFinder мы можем добавить в проект прямо в Visual Studio через . Минимальный необходимый для работы набор пакетов выглядит так:
После установки всех необходимых компонентов можно приступить к настройке серверной стороны.
Во-первых, CKFinder требует, чтобы доступ к файловой системе был только у аутентифицированных пользователей, то есть при каждом запросе на сервер через этот менеджер файлов мы должны сообщать ему, имеет ли право данный пользователь получить доступ к файлам на сервере или нет.
Для этого нам нужно реализовать специальный интерфейс, а в нем метод, который аутентифицирует все входящие запросы.
CKFinderAuthenticator.cs
Public class CKFinderAuthenticator: IAuthenticator { public Task AuthenticateAsync(ICommandRequest commandRequest, CancellationToken cancellationToken) { var user = new User(true, new List()); return Task.FromResult((IUser) user); } }
В приведенном выше примере мы просто каждый раз возвращаем фейкового пользователя, который всегда аутентифицирован (флаг true) и не имеет никаких ролей (пустой лист). То есть у нас всегда есть права на доступ к файловой системе. В реальном проекте к этому вопросу, конечно, нужно подойти более серьезно и совместить этот метод с существующей системой аутентификации и авторизации пользователей.
Namespace CKEditor { public class Startup { public void Configuration(IAppBuilder app) { //регистрируем файловую систему для коннектора FileSystemFactory.RegisterFileSystem(); //объявляем маршрут в приложении и сопоставляем его с коннектором //клиентская JS-библиотека CKFinder ожидает увидеть коннектор именно по этому маршруту app.Map("/ckfinder/connector", SetupConnector); } //объявляем метод по настройке и инициализации коннектора private static void SetupConnector(IAppBuilder app) { //создаем экземпляры необходимых классов var connectorFactory = new OwinConnectorFactory(); var connectorBuilder = new ConnectorBuilder(); var customAuthenticator = new CKFinderAuthenticator(); connectorBuilder .LoadConfig() //подгружаем конфигурацию из файла Web.config .SetAuthenticator(customAuthenticator) //устанавливаем ранее определенный аутентификатор.SetRequestConfiguration((request, config) => { config.LoadConfig(); }); //определяем конфигурацию для каждого отдельного запроса //создаем экземпляр коннектора var connector = connectorBuilder.Build(connectorFactory); //добавляем коннектор в pipeline app.UseConnector(connector); } } }
На этом настройка серверной части завершена. Теперь интегрируем CKFinder-клиент с CKEditor на странице.
@using (Html.BeginForm("Index", "Home", FormMethod.Post)) { } document.addEventListener("DOMContentLoaded", function (event) { var editor = CKEDITOR.replace("content1"); CKFinder.setupCKEditor(editor); });
Если все скрипты подключены правильно и на стороне сервера коннектор настроен, то мы получим доступ к файловой системе через CKFinder из браузера пользователя.
В зависимости от настроек коннектора в файле Web.config мы можем менять разрешения на манипуляции с файлами и папками (создание, перемещение и т.д.).
Отмечу, что мы рассмотрели только базовую конфигурацию CKFinder. В дополнение к этому можно прикрутить логирование, кэширование файлов, различные плагины (например, добавлять водяной знак к загруженным изображениям) и т.д. Более подробно об этом можно почитать в официальной документации.
Я поделился с Вами отличным WISIWIG -редактором, который замечательно подходит для использования его на большинстве сайтов. Этот инструмент несомненно облегчает набор и редактирование текста, несведущим в html людям.
Лично для меня было достаточно сложно на просторах русского интернета найти какую-нибудь информацию по настройке этого WISIWIG -редактора, поэтому пришлось читать документацию на английском. Кстати, этот факт и сподвиг меня на написание этой заметки.
Секрет всего фокуса заключается в том, что практически все настройки сосредоточены в файле /ckeditor/config.js
. Неожиданно правда. Если Вы, как и я, используете в качестве CMS
Textpattern, то путь к файлу будет немного другой — /textpattern/ckeditor/config.js
.
По-умолчанию (без какой-либо настройки) файл выглядит так:
CKEDITOR.editorConfig = function(config) {};
Для того, чтобы настроить вывод значков на панели, нужно добавить параметр config.toolbar_Full . Для того, чтобы вывести все возможные значки, которые предлагает эта система, на панель, добавляем код:
CKEDITOR.editorConfig = function(config) { config.toolbar_Full = [ { name: "document", items: [ "Source","-","Save","NewPage","DocProps","Preview","Print","-","Templates" ] }, { name: "clipboard", items: [ "Cut","Copy","Paste","PasteText","PasteFromWord","-","Undo","Redo" ] }, { name: "editing", items: [ "Find","Replace","-","SelectAll","-","SpellChecker", "Scayt" ] }, { name: "forms", items: [ "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" ] }, "/", { name: "basicstyles", items: [ "Bold","Italic","Underline","Strike","Subscript","Superscript","-","RemoveFormat" ] }, { name: "paragraph", items: [ "NumberedList","BulletedList","-","Outdent","Indent","-","Blockquote","CreateDiv","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","-","BidiLtr","BidiRtl" ] }, { name: "links", items: [ "Link","Unlink","Anchor" ] }, { name: "insert", items: [ "Image","Flash","Table","HorizontalRule","Smiley","SpecialChar","PageBreak" ] }, "/", { name: "styles", items: [ "Styles","Format","Font","FontSize" ] }, { name: "colors", items: [ "TextColor","BGColor" ] }, { name: "tools", items: [ "Maximize", "ShowBlocks","-","About" ] } ]; };
Для того, чтобы убрать ненужные значки, необходимо вручную удалить его обозначение („Maximize“, „ShowBlocks“ и т.д.) в этом коде. Соответственно сохранив правильный синтаксис. Сложного здесь, думаю, ничего нет.
Как делаю я?Обычно для клиентского сайта я использую вот такой вид:
Я намерено убираю инструменты для форматирования текста, которые меняют вид отображения текста на сайте, такие как цвет шрифта, его гарнитура и размер, так как считаю, что этим должен заниматься web-разработчик, а не человек, который наполняет сайт. К тому же большинство людей, которые впоследствии будут работать с этим сайтом, чаще всего имеют «странный вкус», который может испортить общий вид сайта.
Для примера, такой вид интерфейса, можно настроить вот таким кодом:
CKEDITOR.editorConfig = function(config) { config.toolbar_Full = [ { name: "document", items: [ "Undo","Redo"] }, { name: "basicstyles", items: [ "Bold","Italic","Underline","Subscript","Superscript","Format" ] }, { name: "paragraph", items: [ "NumberedList","BulletedList","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock" ] }, { name: "links", items: [ "Link","Unlink" ] }, { name: "insert", items: [ "Image","Table","SpecialChar" ] }, { name: "tools", items: [ "Maximize","Source"] } ]; };
Еще раз повторюсь, если скажу, что на сегодняшний день CKE dit – это лучшая система, которую я только видел.
Рассказать в соц. сетях