Упрощение настройки визуального HTML-редактора контента в Drupal. Визуальный редактор друпал
WYSIWYG редакторы для Drupal
Сегодня мы поговорим с вами о WYSIWYG редакторах, которые можно использовать для более удобного редактирования материала в Drupal. Для тех, кто не знает, что означает WYSIWYG — What You See Is What You Get, «что видишь, то и получишь».
TinyMCE
Свой обзор мы начнем с модуля TinyMCE – наверное, один из лучших JavaScript редакторов. Установка данного модуля достаточно сложна, но в сети предостаточно различных мануалов по установки этого редактора.
Для TinyMCE существуют плагины позволяющие расширить возможности редактора, к примеру: проверка орфографии Яндекс.Спеллер, загрузка картинок на сайт прямо из редактора.
Использовать TinyMCE или нет решать Вам, а тем временем мы продолжим наш небольшой обзорчик WYSIWYG редакторов для Drupal.
Продолжим обзор редакторов текста.
CKEditor
CKEditor — отличный WYSIWYG редактор, очень прост в установке и настройке. Для установки CKEditor необходимо скачать модуль ректора и сам редактор, после чего скопировать редактор в папку ckeditor модуля ckeditor и загрузить на сайт.
Для CKEditor существует множество плагинов: типограф, файловый менеджер, bbcode, проигрыватель для flv и mp3.
В своих проектах я использую данный редактор.
OpenWYSIWYG Editor
Бесплатный кросс-браузерный WYSIWYG редактор. Прост в установке, практически не нагружает сайт, имеет возможность загрузки изображений на сервер, можно использовать как редактор для комментариев, имеет файловый менеджер, может делать ресайз картинок, настраиваемая панель управления, работает во всех браузерах.
Данный редактор попробовать на своих проектах мне не доводилось. Если у Вас есть опыт использования этого модуля, поделитесь с нами им в комментариях.
Продолжим наш обзор и перейдем к следующему модулю под название HTMLBox.
HTMLBox
Простой редактор, использующий jQuery, имеется все самое необходимое для редактирования текста. И преимуществ можно выделить – простое подключение, работа во всех браузерах, небольшой размер модуля.
Данный редактор попробовать на своих проектах мне тоже не доводилось.
Ну и пожалуй рассмотрим еще один WYSIWYG редактор для Drupal под названием — Wysiwyg cleaner. И так приступим к обзору…
Wysiwyg cleaner
Помимо того что это данный модуль можно использовать как редактор, у него есть еще одна особенность – очистка лишних кусков кода которые могут быть вставлены в месте с текстом после копирования из MS World, Open Office.
Установка и настройка данного редактора достаточно проста и не должна вызвать у Вас вопросы.
На этом, пожалуй, закончим наш небольшой обзор редакторов текста для Drupal. Все эти модули можно бесплатно загрузить с сайта Drupal.org.
Спонсор данного поста: Интернет магазин для мам и малышей предлагает купить слинг для переноса детей. Огромный выбор слингов по самым демократичным ценам.
www.maiboroda.ru
Визуальный редактор для Drupal 7
Наступило время для моего проекта добавить визуальный редактор. Он уже установлен на других моих друпаловских сайтах, но каждый раз мне приходится вспоминать, как это делается. На своем первом сайте он установлен был и раньше, но понадобилась возможность загрузки изображений на сервер, а для этого необходимы новые настройки через новые модули. Теперь, чтобы при будущих проектах не заниматься поисками, решил написать пост об этом. Инструкций в интернете множество, возможно я ничего нового не принесу, но все должно быть под рукой, поэтому поехали...
Изначально нам дается возможность добавлять страницы и другую информацию тремя форматами текста - Filtered HTML, Full HTML и Plain text. Если первые два формата требуют хотя бы какого-то знания HTML, то последний практически никак не обрабатывает текст (размеры, цвет, шрифт и др. меняются в css), разве что адреса страниц и электронной почты преобразовываются в ссылки. У меня также есть и четверный фомат - PHP code. Напоминаю, он появился, когда я включил стандартный модуль PHP filter, чтобы можно было вставлять куски php-кода в блоки. Кстати, советую не позволять пользователям выбирать этот формат, потому что это серьезно ослабит безопасность вашего сайта.
Итак, нам нужен новый формат, такой, чтобы можно было обрабатывать текст, как в ворде. Даже во многих почтовых сервисах, например mail.ru уже внедренны визуальные редакторы.
Ближе к делу, все это как всегда решается дополнительными модулями.
- https://drupal.org/project/ckeditor - один из нескольких распространенных редакторов. Но именно на нем я и остановился. Сначала скачиваем и устанавливаем этот модуль.
Далее начинаются танцы с бубнами, потому что просто установить и работать не получится. Один момент следует учесть - с официального сайта http://ckeditor.com/download скачиваем архив, и уже его содержимое закидываем внутрь модуля, в папку ckeditor там, где есть файл COPY_HERE.txt.
Итого: адрес установленно модуля - ваш_сайт/public_html/sites/all/modules/ckeditor
адрес архива с официальног сайта - ваш_сайт/public_html/sites/all/modules/ckeditor/ckeditor
необходимый файл - ваш_сайт/public_html/sites/all/modules/ckeditor/ckeditor/ckeditor.js
Установленный модуль среди прочих.
В модуле есть одноименная папка в нее загружаются файлы с официального сайта.
C визуальным редактором все закончено, но изображения закачиваются только из интернета через вставку ссылки, а хотелось бы нормально, с компьютера. Скачиваем очередной модуль - https://drupal.org/project/imce, включаем. Теперь imce нужно прикрутить к ckeditor. Идем в настройки визуального редактора /admin/config/content/ckeditor и выставляем все imce.
Кому не нужен формат Full HTML может его редактировать, я же создаю новый формат текста - Редактор.
Небольшой нюанс. Все файлы или изображения заливаются с определнную папку, чтобы это изменить следует настроить пути. Например, чтобы каждый пользователь имел свою отдельную папку.
am-saved.info
Упрощение настройки модуля визуального редактора CKEditor в Drupal
В наше время трудно представить себе систему управления контентом сайта (CMS), не имеющую в своем составе визуальный редактор, называемый также WYSIWYG-редактором (What You See Is What You Get – Что видишь, то и получаешь). Эти редакторы справляются со своей задачей конечно же не так хорошо, как всем известный Word, однако при этом заметно облегчают жизнь.
Следуя своей философии конструктора системы управления контентом под конкретные задачи, CMS Drupal, в отличие от других CMS, не содержит в своем ядре предустановленного редактора, оставляя конечному пользователю право выбора редактора на свой вкус. А выбор при этом, действительно, не маленький: CKEditor, FCKeditor, jWysiwyg, markItUp, NicEdit, openWYSIWYG, TinyMCE, Whizzywig, WYMeditor, YUI editor и возможно другие.
Очень многие останавливают свой выбор на первом редакторе из этого списка, который отличается мощным функционалом и большим количеством возможных настроек. При этом самым естественным шагом в этом случае кажется необходимость скачать и установить соответствующий модуль, дающий возможность подключения CKEditor к Drupal (http://drupal.org/project/ckeditor), а также, конечно же, и сам редактор, без которого этот модуль работать не будет. Судя по статистике скачиваний, многие именно так и делают. Долгое время и мы поступали точно также. Однако у такого способа подключения CKEditor есть некоторые особенности, которые со временем могу начать раздражать.
- Если установить в настройках CKEditor его подключение ко всем полям по-умолчанию, то при установке новых модулей почти наверняка придется возвращаться к его настройкам, чтобы внести в список исключенных для отображения редактора полей ID очередного поля (задачка не вполне очевидная для обычного пользователя).
- Если отключить его показ по-умолчанию, то наоборот – при создании новых типов материалов или новых блоков придется прописывать ID их полей в список разрешенных.
- Редактирование набора инструментов в панели управления редактора возможно лишь через редактирование специального конфигурационного файла этого редактора.
- Настройка различного вида панелей инструментов редактора требует создания его различных профилей, настройка которых также не совсем тривиальна.
Все описанное делает настройку CKEditor не вполне простым и удобным делом, особенно для конечных пользователей CMS. К счастью, есть и другой подход подключения HTML-редактора к Drupal, лишенный описанных выше неудобств.
Вместо использования специально «заточенного» под конкретный WYSIWYG-редактор модуля можно установить модуль Wysiwyg (http://drupal.org/project/Wysiwyg), позволяющий подключать на выбор почти любые из существующих редакторов такого типа. И дело здесь не только в универсализме. Данный модуль позволяет выбирать для панели инструментов редактора с помощью кликов мыши любую из доступных кнопок : сделать шрифт жирным, подчеркнутым, выбрать цвет шрифта и многое другое, отдельно для каждой роли:
Принцип разделения настроек CKEditor для различных ролей пользователей при использовании модуля Wysiwyg также другой: профили CKEditor создаются автоматически и привязываются к форматам ввода данных, которые, как известно, можно создать столько, сколько нужно в дополнение к уже встроенным.
Такой подход дает еще одно удобство при редактировании материалов. Если мы выберем у поля с нашим HTML-содержимым формат ввода без подключения СKEditor, этот формат соответственно сохранится и уже не придется открывать экраны настроек профилей самого СKEditor, чтобы добавить там ID соответствующего поля ввода в список для исключения.
При использовании модуля Wysiwyg есть еще один ньюанс в интеграции с ним модуля IMCE (http://drupal.org/project/imce), также обычно используемого в сборках Drupal в качестве встраиваемого или работающего отдельно инструмента для загрузки и просмотра картинок и других файлов, а также для получения поддержки работы с персональными каталогами и квотами на их заполнение. Если в первом случае, когда использовался модуль CKEditor, его интеграция с IMCE производилась в настройках модуля редактора, то теперь необходимо дополнительно установить модуль IMCE Wysiwyg bridge (http://drupal.org/project/imce_wysiwyg), после чего возможность выбора IMCE появляется уже в настройках каждого из профилей Wysiwyg среди возможных плагинов и кнопок (см. на скриншоте перед предыдущим во второй колонке снизу). Достаточно поставить галочку и он автоматически становится доступен в редакторе.
Похожее
ikalm.ru
Drupal 7 Установка редактора ckeditor + imce
После установки базовой версии Drupal 7 функционал достаточно маленький. И первое что нужно сделать это добавить визуальный редактор для редактирования страниц и настроить загрузку изображений.
И далее по порядку:
- Копируем модуль ckEditor в папку sites/all/modules
- Распаковываем скачанный ckeditor в папку sites/all/libraries/ckeditor/ ( внимание! в папку sites/all/libraries/ckeditor нужно копировать не все содержимое архива, а только содержимое внутренней папки "ckeditor" )
- Заходим на страницу управления модулями включаем ckeditor -> сохраняем настройки
Теперь мы можем редактировать текст, но не можем загружать фотографии и flash из визуального редактора на наш сайт.
Для загрузки изображений и flash файлов существует модуль imce.
Для его установки:
- Скачиваем сам модуль отсюда: http://drupal.org/project/imce
- Копируем в папку /sites/all/modules/
- Заходим на страницу управления модулями включаем модуль -> сохраняем настройки
Следующим этапом модуль imce нужно прикрепить к модулю ckeditor.
Для этого заходим в Конфигурация->ckeditor далее "Изменить" профиль Full
В пункте "Настройка Обзора Файлов" указываем:
- Тип файлового браузера (Link окно) - IMCE
- Тип файлового браузера (Image окно) - IMCE
- Тип файлового браузера (Flash окно) - -IMCE
Ну и пора уже создать парочку статеек, чтобы вы поняли как это делать. По умолчанию в Drupal7 используется тема Bartik. Я не стал искать что то другое, потому что считаю, что для блога она очень даже подходит. В ней есть практически все для блога. Да, и еще, я надеюсь вы уже занесли информацию о сайте, если нет идем сюда "Информация о сайте" и вводим "Название сайта" и "Слоган", если надо.
В поле "Навигация" мы видим "Добавить содержимое", вот сюда и идем. Выбираем "Статья". В поле "Title" вводим название статьи. В "Формате текста" выбираем "Full HTML". В "Body" скопируем нашу готовую (если она и правда готова) статью. Если статьи нет то набираем что нибудь, не важно что, и давим "Сохранить". Все! Статья готова! В этой статье не будем пока останавливаться на настройках редактора, потому что он пока нужен был нам, чтобы создать статью. Когда мы заходим прочитать статью, то видим ссылку. И вот в следующей статье мы как раз о ссылках и поговорим - это очень важно. А к редактору мы конечно еще вернемся в следующих статьях.
rtfm.2gogo.ru
IMCE Drupal - модуль для картинкок в визуальном редакторе
Здравствуйте, друзья! В прошлой статье я рассказал о модуле Wysiwyg, который позволяет добавить в Drupal визуальный редактор. Мой выбор пал на редактор CKEditor. Сегодня мы научим его работать с картинками. В этом нам помогут два модуля Drupal: IMCE и IMCE Wysiwyg bridge.
Давайте посмотрим, какие возможности для работы с картинками предоставляет нам редактор CKEditor по умолчанию. Переходим на страницу создания нового материала любого типа и переключаемся на формат текста «Full HTMS», для которого задан редактор CKEditor. Жмем на кнопку «Изображение» и попадаем в окно свойств изображения.
Как видите, можно только добавить изображение с другого интернет ресурса, указав URL адрес в поле «Ссылка». Возможности загрузить картинку на сервер и использовать ее в материале нет. Эта проблема характерна не только для CKEditor, но и для других редакторов Drupal.
Для ее решения нам потребуется установить бесплатный модуль IMCE. Чтобы связать IMCE и Wysiwyg, понадобится еще один дополнительный модуль — IMCE Wysiwyg bridge. Установите оба модуля в систему и активируйте.
Переходим к настройкам в раздел «Конфигурация» — «Мультимедиа» — «IMCE». Здесь представлено два профиля:
- User-1 — ему доступно все: загружать файлы любого объема, закачивать, удалять и редактировать картинки, разрешен доступ ко всем каталогам директории /sites/default/files. Кстати, советую создать в ней отдельную папку images под картинки.
- Sample profile — профиль с ограниченными правами и функциями. Имеет доступ только к своей папке, которая создается автоматически после начала работы пользователя с IMCE.
Если вы не единственный пользователь Drupal, то имеет смысл задать профили для ролей:
- administrator — User-1;
- авторизованный пользователь — Sample profile;
- анонимный пользователь — не указано.
Далее переходим в настройки редактора CKEditor, выбранного для Full HTML.
В разделе «Кнопки и плагины» включаем IMCE. Сохраняем все настройки и вновь переходим на страницу создания нового материала. Переключаемся на формат Full HTML и заходим в «Изображения».
Теперь нам доступна функция «Выбор с сервер». Открывается окно, напоминающее файловый менеджер. В левом столбце представлены все папки каталога /sites/default/files. В данном случае он считается корневым. Сверху имеются пять функциональных кнопок: закачать, превью, удалить, изменить размер и вставить файл.
Посмотрим на IMCE в действии — загрузим на сервер картинку, отредактируем ее и вставим в текст материала.
1. Загружаем картинку на сервер в каталог /images.
При желании можно выбрать создание миниатюры определенного размера. Загрузка файла займет некоторое время.
2. Картинка загружена, изменим ее размеры.
Чтобы соблюсти пропорции, указывайте только ширину или только длину. Тогда не заданная величина сформируется автоматически. Если убрать галочку из опции «Создать новое изображение», то картинка будет перезаписана.
3. Картинка отредактирована и мы нажимаем кнопку «Вставить файл».
4. Попадаем в окно «Свойства изображения».
- Обязательно задаем Альтернативный текст для изображение. Это важно с точки зрения поисковой оптимизации материала.
- Размеры картинки уже заданы.
- Граница — задаем ширину рамки в пикселях.
- Задаем отступы по горизонтали и вертикале.
- Указываем выравнивание.
Обязательно обращайте внимание на поле «Предпросмотр». Там показывается, как будет выглядеть картинка в материале.
Далее идем на вкладку дополнительно и заполняем поле заголовок.
После этого жмем «ОК» и любуемся полученным результатом.
На этом на сегодня все. Надеюсь, знакомство с модулем IMCE оказалось для вас продуктивным. Спасибо за внимание! Берегите себя.
Лучший способ выразить благодарность автору - поделиться с друзьями!
Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:
Следите за обновлениями в Twitter и RSS.
fairheart.ru
Текстовый редактор CKEditor | Drupal
Модуль CKEditor позволяет Drupal заменить текстовые поля редактором CKeditor. Этот HTML текстовый редактор имеет множество очень мощных функций, как у известного оффлайного редактора Word, только в web. Он относительно мало весит и не требует установки каких-либо программ на компьютере.
Минимально необходимо:- Скачиваем модуль CKEditor- Новичкам можно напомнить, что ещё можно скачать русский перевод с сайта Drupaler - для модуля CKEditor- И конечно же скачиваем сам редактор CKeditor (не перепутайте его с FCKeditor, это предыдущая версия редактора. Он в своё время как раз и был переименован в CKEditor, в связи с неблагозвучным произношением в английском языке сочетания "FCK" в названии редактора.)
Установка
Модуль для Drupal распаковывается в папку: drupal/sites/all/modules/ckeditor. А сам текстовый редактор распаковывается в папку с модулем: drupal/sites/all/modules/ckeditor/ckeditor. После установки модуля на сайте, появятся возможность настраивать редактор: Управление › Настройка сайта › CKEditor. Комментировать их я не буду, вы сами можете их посмотреть и опробовать.
Настройка файла ckeditor.config.js
При этом есть возможность гибко настраивать редактор через файл конфигурации drupal/sites/all/modules/ckeditor/ckeditor.config.js. И всё что недоступно в настройках через Web-интерфейс модулей Drupal, можно прописать в этом файле.
1. Можно переназначить свои стили для расположения текста по левому, правому края, по центру или растянуто. У меня есть свои собственные стили прописанные в теме сайта, поэтому я их и прописал:
config.justifyClasses = [ 'editor-left-button', 'editor-center-button', 'editor-right-button', 'editor-justify-button' ];
2. Назначить максимальную-минимальную ширину и высоту окна редактора.
//Ширина config.resize_minWidth = 450; config.resize_maxWidth = 600; //Высота//config.resize_minHeight = 100; //config.resize_maxHeight = 500; //Или же вообще отключить изменение размера редактора, отключив плагин "resize"//config.removePlugins = 'resize';
3. Выключаем подсказки названия тэга в строке состояния редактора: body p strong. Врядли это необходимо видеть обычному посетителю, незнающему HTML. Поэтому просто отключаем плагин "elementspath" показывающий комментарии по тэгам.
config.removePlugins = 'elementspath';
4. Редактор кодирует кавычки " превращая их в " - мне это показалось не верным, так как в будущем я собираюсь использовать типограф, чтобы текст правильнее выглядел на сайте. Если же кавычки будут записаны как ", то типограф их не будет превращать в кавычки-ёлочки « ». Поэтому отключаем кодирование кавычек:
config.entities = false;
5. При открытии диалога вставки изображений, ссылок и флеша во всплывающем окне присутствуют дополнительные вкладки:Ссылка, Цель, Расширенный. Отключаем дополнительные вкладки, прописывая код:
CKEDITOR.on( 'dialogDefinition', function( ev ){ var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; if ( dialogName == 'link' ){dialogDefinition.removeContents( 'advanced' );dialogDefinition.removeContents( 'target' );} if ( dialogName == 'image' ){dialogDefinition.removeContents( 'advanced' );dialogDefinition.removeContents( 'Link' );} if ( dialogName == 'flash' ){dialogDefinition.removeContents( 'advanced' );} });
6. Далее описываются разные панели инструментов: DrupalFiltered, DrupalBasic, DrupalFull. Как вы понимаете, что наиболее полная панель включающая все виды кнопок - DrupalFull. На её основе вы можете создать свою собственную панель инструментов, с теми кнопками которые необходимы именно вам, как пример вот такая панель MyDrupalPanel.
/* * This toolbar MyDrupalPanel */ config.toolbar_MyDrupalPanel = [ ['Undo','Redo','Source','Maximize','-','RemoveFormat','SelectAll','Paste','PasteText','PasteFromWord','-','Templates','Image','Table','Link','Unlink','HorizontalRule','DrupalBreak'], '/', ['Bold','Italic','Strike','SpecialChar','-','Blockquote','NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','-','Format'] ];
После того как вы её сохраните вы сможете выбрать свою панель в настройках используемой панели редактором Управление › Настройка сайта › CKEditor.
7. В моей теме оформления сайта возникла проблема с фоном в редакторе и с расположением текста в нём. Фон был бежевый, вместо белого. А текст весь отображался по центру, хотя по умолчанию должен идти по левому краю. Такие вещи легко исправить прописав css-стили в параметре "config.extraCss":
config.extraCss = 'body{background:#FFF;text-align:left;font-size:0.8em;}';
Там же ниже в файле конфигурации редактора приведён пример, как можно прописать индивидуально стили для каждой из тем оформления.
На этом основные настройки файла конфигурации drupal/sites/all/modules/ckeditor/ckeditor.config.js окончены. В этом файле можно ещё подключать дополнительные плагины к редактору, но об этом чуть позднее.
Ссылки:
Загрузка файлов
Дело в том что CKeditor, в отличие от своей ранней версии FCKeditor уже не содержит в себе файловый менеджер. Сам загрузчик теперь существует в виде отдельного плагина CKFinder, но он платный. Поэтому проще будет использовать уже привычный всем модуль для Drupal IMCE (перевод модуля drupaler.ru). Его установка и настройка не должна вызвать проблем. После установки его можно будет подключить к редактору в настройках Управление › Настройка сайта › CKEditor > Настройки файлового браузера. Поскольку уже многие знакомы с этим модулем, останавливаться на нём подробнее не буду.
Баг в теме оформления
Мне не очень понравилась стандартная тема оформления редактора "kama". Поэтому я использовал тему оформления "v2". Но в ней наблюдался баг, кстати как и в теме оформления "office2003". При вызове диалогового окна в редакторе, рамка вокруг окна криво отображалась в браузере Опера. Мне было лень возится со стилями, и я просто открыл графический редактор и удалил эту рамку из самого рисунка и заменив два файла в папке /sites/all/modules/ckeditor/ckeditor/skins/v2/images/ своими:- sprites.png, sprites_ie6.png, dialog_sides.gif, dialog_sides.png, dialog_sides_rtl.png (архив с файлами). Конечно это не самое грамотное решение, зато очень быстрое.
Как написать/подключить плагин к редактору
У CKEditor есть своё API, которую можно использовать и подключать дополнительные плагины к редактору. Давайте рассмотрим как писать свой плагин. Мне например, понадобилось создать дополнительную кнопку Справки, где можно было бы описать инструкции для пользователей, о том как публиковать статьи. Для этого был написан плагин DrupalHelp.
1. Для начала создаём папку "drupalhelp" - drupal/sites/all/modules/ckeditor/plugins/drupalhelp.
2. В папке создаём файлик "plugin.js" со следующим содержимым:
// Создаём плагин "drupalhelp" CKEDITOR.plugins.add( 'drupalhelp',{ init : function( editor ) { // Создаём кнопку на панели инструментов, и назначаем для неё команду - показать диалоговое окно editor.addCommand( 'drupalhelp', new CKEDITOR.dialogCommand( 'drupalhelp' ) ); // Название кнопки на панели инструментов "DrupalHelp" editor.ui.addButton( 'DrupalHelp', { // Название кнопки label : Drupal.t( 'Help' ), // Картинка с нарисованной кнопкой icon : this.path + 'images/drupalhelp.gif', // Команда для вызова command : 'drupalhelp' } ); // Подключаем дополнительный js-файл, в котором будут описаны команды по показу диалогового окно CKEDITOR.dialog.add( 'drupalhelp', this.path + 'dialogs/help.js' );// If the "menu" plugin is loaded, register the menu items. if ( editor.addMenuItems ) { editor.addMenuItems( { drupalhelp : { label : Drupal.t( 'Help' ), command : 'drupalhelp', group : 'drupalhelp', order : 1 } }); } }} );
3. Создаём папку "dialogs" - drupal/sites/all/modules/ckeditor/plugins/drupalhelp/dialogs, в которой и создаём файлик диалогового окна - "help.js":
CKEDITOR.dialog.add( 'drupalhelp', function( editor ){ return { // Название окна title : Drupal.t( 'Help' ), // Размеры окна minWidth : 400, minHeight : 230, contents : [ { id : 'tab1', label : '', title : '', expand:true, padding:0, elements : [ { type : 'html', id : 'content', // Текст в окне - вы можете прописать, именно тот что нужен вам. html :''+Drupal.t( 'Help' )+'
',// Кнопка "Ок", для закрытия окна}]}],buttons:[CKEDITOR.dialog.okButton]};} );4. Не забываем нарисовать файлик картинки с кнопкой drupal/sites/all/modules/ckeditor/plugins/drupalhelp/images/drupalhelp.gif
5. И сделать перевод модуля drupal/sites/all/modules/ckeditor/plugins/drupalhelp/images/translations/plugins-drupalhelp.ru.po.
Готово! Прилагаю архив с примером готового модуля drupalhelp.rar из папки drupal/sites/all/modules/ckeditor/plugins/drupalhelp.
6. Теперь подключим этот модуль к редактору. Для этого в файле drupal/sites/all/modules/ckeditor/ckeditor.config.js необходимо, во первых подключить этот модуль, прописав в самом низу файла, перед закрывающей фигурной скобкой:
вставляем код:
config.extraPlugins += (config.extraPlugins ? ',drupalhelp' : 'drupalhelp' ); CKEDITOR.plugins.addExternal('drupalhelp', Drupal.settings.ckeditor.module_path + '/plugins/drupalhelp/');
А также добавить кнопку 'DrupalHelp', прописав её на используемую панель инструментов. Я её добавил на свою собственную панель MyDrupalPanel:
/* * This toolbar MyDrupalPanel */ config.toolbar_MyDrupalPanel = [ ['Undo','Redo','Source','Maximize','-','RemoveFormat','SelectAll','Paste','PasteText','PasteFromWord','-','Templates','Image','Table','Link','Unlink','HorizontalRule','DrupalBreak','-','DrupalHelp'], // '/', ['Bold','Italic','Strike','SpecialChar','-','Blockquote','NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','-','Format'] ];
7. Чтобы увидеть кнопку в редакторе, возможно понадобиться не только обновить страницу, но и очистить кэш броаузера. Так как браузер упорно сохраняет javasctript и не обновляет их при загрузке страницы.
Ссылки:
- Опять же документация по редактору на английском языке CKEditor 3.x - Developer's Guide
- Документация по API CKEditor, для написания собственных плагинов и кнопок к редактору JavaScript API Documentation
Какие есть плагины к редактору
- CKEditor BBCode PluginИспользование BBCode в редакторе.
- Code Plugin, и соответствующая тема на drupal.ruВставка любого программного кода в редактор.
- CKEditor SWF - в виде отдельного модуля с drupal.org (перевод модуля drupaler.ru)Проигрыватель для вставки флеш роликов, FLV видео, MP3
- IMCE - в виде отдельного модуля с drupal.org (перевод модуля drupaler.ru)Уже упоминавшийся выше загрузчик файлов
- AjexFileManagerЕщё один файловый менеджер
- FCK Editor типограф, тема на habrahabr, тема на drupal.ruПлагин для подключении типографа к редактору. К сожалению плагин писался для FCKEditor, но возможно авторы подправят его и перепишут для CKEditor
drupal.ru
[Решено] Связка визуальный редактор + загрузчик изображений + вставка изображений в текст
Уделив целый день выбору и тестированию существующих визуальных редакторов WYSIWYG, пришёл к выводу, что без консультации опытных людей мне не обойтись.
Так же пришёл к заключению, что подбирать связку визуальный редактор + загрузчик изображений + вставка изображений надо сразу.
Данная связка должна работать на сайте позиционирующемся как каталог статей, т.е. иметь минимум лишних функций и максумум удобств при добавлении статьи пользователями. Никаких галлерей, слайдшоу и прочих замудренностей. Только вставка изображений в текст и последующее их красивое отображение. Необходимо предоставить только те функции, которые помогут пользователю грамотно и с минимум проблем опубликовать свою статью.
Итак, постараюсь сформулировать задачи, которые должны быть решены.
1. Визуальный редактор. Необходима поддержка ограниченного набора тэгов:<strong>, <b>, <i>, <a>, <p>, <img>, <ul>, <ol>, <li>Этого списка, думаю, вполне хватит, хотя интересно ваше мнение. Поддержка распространнённых браузеров (FF, Opera, IE).
2. Загрузчик изображений. Максимально простой интерфейс. Загрузка изображений в папку вида upload/YY/MM (возможны варианты). Не показывать список ранее загруженных файлов, как это, например, делает MCImageManager. Вполне вероятно с последним пожеланием погорячился, просто думаю, что пользователь будет путаться в таком обилии файлов и папок.
3. Модуль просмотра изображений. Автоматическое создание превью. Вставка в текст документа превьюшки, со ссылкой на основную картинку. При показе основной картинки желателен эффект наподобии Lightbox2.
4. Ну и само собой, желательно иметь руссифицированный вариант всего этого богатства.
Насколько я вижу, многие модули не могут "жить дружно" и преподносят сюрпризы в виде багов, поэтому и интересует практический опыт построения подобных схем.
Уважаемое сообщество, пожалуйста, посоветуйте набор мудулей позволяющих реализовать это подобие "технического задания".
Открыт для диалога, готов выслушать любые предложения и замечания.
drupal.ru
