Ckeditor и загрузка картинок

Скорее себе на память, но может еще кому сгодится.
Если CKEditor не хочет загружать изображения, то можно использовать связку Insert+CKEditor Insert+CKEditor
Добавить новое поле к типу материала, настроить поле. В настройкахъ отображения поля выставить hidden. Настроить CKEditor Insert. В настройках профиля CKeditor убрать стандартную кнопку “вставить изображение”, включить плагин Insert, добавить кнопку вставки изображения от CKeditor Insert (появляется при включении CKeditor Insert).

Не самое элегантное решение, но как альтернатива монстру IMCE подойдет.

Пример работы – на скрине.

А сам модуль Insert и без визуального редактора работает. Тоже полезно

Источник: http://www.drupal.ru/node/116207

Paste Format – чистка вставляемого текста

По следам успеха модуля uLogin (3 месяца после создания – 500+ сайтов используют на данный момент), про который я уже рассказывал на страницах drupal.ru, хочу рассказать о другом проджекте, который направлен лицом к пользователям – Paste Format.

Модуль решает проблему копирования/вставки текста из всяких “умных” источников (продукты от MS, с других сайтов, ещё откуда-то с “продвинутым” форматированием) – а именно проблему того, что копируется и вставляется различный “мусор”, который вам совсем не нужен в вашем контенте и, кроме этого, ломает ваши шрифты и стили. Да, при отображении контента это всё можно вырезать, используя формат ввода с нужными фильтрами; НО при этом весь этот мусор сохраняется в БД, подгружается при редактировании контента, ломает стили отображения текста в вашем визуальном редакторе, ваши авторы придумывают мифы и другую “ахинею”, что вот при редактировании текст такой, а при отображении все ломается, сайт глючит и так далее. На что тех персонал им обычно отвечает, что вы сами мол “уроды”, копируете текст хз откуда, вы должны писать его сразу в визуальном редакторе на сайте или вставлять через спец кнопочку, которая убивает все форматирование… или вообще включает принудительную чистку форматирования при вставке. В общем, ситуация не из приятных

Именно для решения этой проблемы и был написан модуль Paste Format (сейчас работает только в тандеме с CKEditor, как через отдельный модуль для этого редактора, так и через модуль WYSIWYG). Он позволяет отфильтровать вставляемый текст одним из форматов ввода, настроенном на вашем сайте в админке Друпала. То есть никаких регэкспов вам писать не надо, тем более на джаваскрипте

Установка проста – скачать, распаковать, включить. Создать _отдельный_ формат ввода, в котором включить и настроить фильтры, которые будут вычищать ненужный вам маркап (здесь на помощь придут модули WYSIWYG Filter, HTML Purifier, htmLawed и другие) – и настроить Paste Format использовать именно его (иначе будет использоваться формат ввода по умолчанию). Раздать пермишен на использование этого модуля тем ролям, которые создают/редактируют контент на сайте (этот пермишен защищает аяксовый колбек, который и производит фильтрацию вставляемого текста). Включить плагин Paste Format в нужных профилях редактора CKEditor.

Технически модуль вешается на событие вставки текста в визуальный редактор, посылает этот текст на сервер и вставляет уже обработанный текст. При этом вы сами управляете тем, какой маркап оставлять, а какой вычищать – просто настраивая фильтры обработки текста в админке Друпала.

Надеюсь, я ясно изложил позицию, для чего именно и почему был написан такой модуль (и в комментариях не будет разводиться флейм, что вот у CKEditor есть своя собственная чистка при вставке и так далее – на это могу сказать, что вы сами не контролируете, что именно и как вычищает CKEditor (и по моему опыту он может что-то оставлять, убирая что-то нужное – а поправить это я не могу ); а с этим модулем все находится под вашим полным контролем).
Также надеюсь, что данный модуль поможет улучшить юзер экспириенс авторов контента и отношения между ними и разработчиками/администраторами сайта.

Спасибо!

Источник: http://www.drupal.ru/node/82923

[Решено] Пропал/исчез/отвалился CKeditor / IMCE

Весьма популярная проблема “пропавшего” CKeditor или его частей. Во время разработки своего последнего сайта столкнулся с ней раза три и все по разным причинам. Отпишусь, пожалуй. Сразу скажу, что решения проблем в большинстве случаев очевидные, но сразу в голову не всегда приходят.

Возможная проблема 1

Проблема: Установили модуль, но не закинули в него сам редактор.
Решение: Идем на страничку редактора, качаем и закидываем файлы и папки редактора в подпапку “ckeditor” папки модуля. В этой подпапке должен быть файл-подсказка COPY_HERE.

Возможная проблема 2

Проблема: Панелька просто не появляется. Или появляется, но не у всех пользователей.
Решение: Во первых правильно должны быть настроены разрешения ролей самого Drupal (mysite/admin/user/permissions). Во вторых CKeditor нужно вручную привязывать к новым ролям. Идем в настройки редактора (mysite/admin/settings/ckeditor), выбираем профиль, например Default и напротив него нажимаем “изменить”. В первой группе настроек “Основные настройки” выставляем галочки нужным новым ролям.

Возможная проблема 3

Проблема:

У меня такое произошло после выгрузки сайта на хостинг.
Решение: Помогло удаление модуля и переустановка+перенастройка прямо на хостинге. Корень проблемы так и не нашел.

Возможная проблема 4

Пробелма: не открывается файловый менеджер IMCE или нет кнопки “Browse” при попытке добавить картинку в сообщение.
Решение: идем в настройки редактора (mysite/admin/settings/ckeditor), выбираем профиль, нажимаем напротив него “изменить”. Далее в группе Настройки файлового браузера, в File browser type (Link dialog) выбираем IMCE.

Возможная проблема 5

Проблема: При работе с IMCE нет кнопки “загрузить” и “Создать дирректорию”.
Решения: Во-первых, чтобы создать поддиректории нужен модуль IMCE mkdir. Кнопки у меня пропали из-за конфликта с “modernizr”, который использовал при вертске.

UPD: предложенные решения помогли именно мне, в то время как не помогли другие. Таких “других” очень много. Смотрите и их, напрмиер кликнув по тегу ckeditor.

Источник: http://www.drupal.ru/node/68678

Потестим кнопочку? (Простой вариант интеграции elFinder в CKEditor)

UPD. Как выяснилось из комментариев, модуль ckeditor с версии 6.x-1.3 официально поддерживает elfinder. Таким образом, всё написанное относится к возможному способу вывода “быстрой” кнопки elfinder’a на тулбар.
UPD2(08/05/2011). Плагин доработан до автоматического определения типа файла, возвращаемого elFinder
Нужен был файлменеджер/мультизагрузчик для редактора CKeditor (именно для drupal-модуля).
Я обычно использую IMCE и стал искать дополнения к IMCE, поддерживающие мультизагрузку.
Нашёл только IMCE Swfupload, но он ещё в бета-стадии и требует установки дополнительных модулей. В общем, не устроил.
Зато как-то неожиданно открыл для себя elFinder.
Менеджер показался очень удобным (на мой взгляд, даже получше IMCE).
Мультизагрузка, drag&drop, создание-удаление директорий, файлов. Автоматические тамбы картинок, ну и в целом как-то юзабельнее выглядит.
CKEditor (по крайней мере 6.x-1.3) позволяет интегрировать IMCE как “быструю” кнопку на тулбар (отдельно от диалога выбора ссылки/картинки/файла). Просто нужно раскомментировать соответствующие определения в ckeditor.config.js и убедиться что присутствует папка imce в /modules/ckeditor/plugins
Я стырил это решение и наскоро адаптировал его под elFinder в виде скромного плагина-кнопки (elFinder).
Результат: на тулбаре имеется самодельная кнопочка, по клику на которой сразу открывается окно этого файлового менеджера (т.е. минуя диалог выбора адреса).

После выбора файла (двойной щелчок или команда меню и т.д.) в менеджере, он закрывается и ссылка возвращается в CKeditor в обвязке тегов.
В общем, почти всё как в “обычном” elFinder или IMCE.
Желающие могут пойти дальше и доработать решение плагина. Для примера сравните код приложенного плагина и стандартного плагина кнопки IMCE (функция setFile()): /modules/ckeditor/plugins/imce/plugin.js
Потребуются модули:
- модуль CKEditor
- модуль elFinder
- сам файлменеджер elfinder (он отдельно от модуля).
Плагин кнопки в архиве приложен к посту. Описание установки – в файле README.TXT архива.
После установки не забыть установить необходимые разрешения ролям для доступа к elFinder, CKEditor (если вы это ещё не сделали).
Отображение кнопки не зависит от разрешений.
То есть – если вы запретили какой-то роли использовать elFinder, то кнопка не исчезнет с панели. Просто по клику на ней будет обычный “У вас нет прав для просмотра и т.д.”.
ps. И это… Отписывайтесь, пожалуйста, у кого что получилось. Будут доработки – велкам + респект и уважуха

Прикрепленный файл Размер elfinder.zip 2.72 кб

Источник: http://www.drupal.ru/node/60796

Текстовый редактор CKEditor

Модуль  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 3.x – Developer’s Guide Список параметров настроек CKEditor доступных в файле ckeditor.config.js Дополнительно много интересных примеров как настраивать файл ckeditor.config.js в старом редакторе FCEditor. Но многие примеры аналогичны и для CEditor Documentation for the configuration options. Инструкции по установке модуля редактора на Drupal на английском языке Drupal + CKEditor Форму поддержки на английском языке Community Загрузка файлов

Дело в том что 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 :'<div>'+Drupal.t( 'Help' )+'</div>', // Кнопка "Ок", для закрытия окна }]}],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

Источник: http://www.drupal.ru/node/45592

© 2009 Обзор CMS