Ckeditor drupal 7


My installation settings:

  • Drupal 7
  • WYSIWYG Version 7.x-2.2+73-dev
  • ckeditor 4.5.1

Client requirements.

I created a simple CKeditor plugin that allows non-technical writers to change the text of a URL only by selecting (partially) the link and editing the content in a prompt.

This small plugin allows the end users to avoid typos or deleting the URL by mistake.

In order to make this plugin work in Drupal, I needed to create a plugin for the WYSIWYG Drupal module (the Drupal way).

Plugin demo:

Ckeditor drupal 7

The Drupal 7 Module:

Drupal 7 module structure:

 - ckeditor_linkchange/ <- Drupal 7 Module folder.     - plugins/         - linkchange/ <- Actual ckeditor plugin.     - ckeditor_linkchange.info <- Drupal 7 info file.     - ckeditor_linkchange.module <- Drupal 7 module file. 

ckeditor_linkchange.info

This file declares our module and its dependencies:


name = "Ckeditor linkchange plugin" description = "Adds the ability to change the text or a url with the linkchange button (CKEditor)" package = Custom dependencies[] = wysiwyg core = 7.x

ckeditor_linkchange.module

The `hook_wysiwyg_plugin()` lets the WYSIWYG module know that we have a new plugin available.

 <?php      /**  * Implements hook_wysiwyg_plugin().  *  */ function ckeditor_linkchange_wysiwyg_plugin($editor, $version) {     $plugins = array();     switch ($editor) {         case 'ckeditor':             if ($version > 4) {                 $plugins['linkchange'] = array(                     'path' => drupal_get_path('module', 'ckeditor_linkchange') .  

plugins/linkchange',                     'filename' => 'plugin.js',                     'load' => TRUE,                     'buttons' => array(                         'linkchange' => t('Linkchange'),                     ),                 );             }             break;     }     return $plugins; }

In my case I checked that the ckeditor version is superior to version number 4.

the array $plugins[‘linkchange’] contains the path to the plugin and the buttons parameter which allows this plugin to be enabled from the WYSIWYG UI (admin/config/content/wysiwyg/).

Ckeditor drupal 7

The CKeditor plugin:

 - linkchange/     - dialogs/         - linkchange.js     - icons/         - linkchange.png         - plugin.js

plugin.js


 (function($) {     CKEDITOR.plugins.add( 'linkchange', {         icons: 'linkchange',         init: function( editor ) {             editor.addCommand( 'linkchange', new CKEDITOR.dialogCommand( 'linkchangeDialog' ) );             editor.ui.addButton( 'linkchange', {                 label: 'Link text change',                 command: 'linkchange',                 toolbar: 'linkchange'                  });             if ( editor.contextMenu ) {                 editor.addMenuGroup( 'linkchangeGroup' );                 editor.addMenuItem( 'linkchangeItem', {                     label: 'Change link', .  

nbsp;      editor.contextMenu.addListener( function( element ) {                     if ( element.getAscendant( 'linkchange', true ) ) {                         return { abbrItem: CKEDITOR.TRISTATE_OFF };                     }                 });             }             CKEDITOR.dialog.add( 'linkchangeDialog', this.path + 'dialogs/linkchange.js' );         }     }); })(jQuery)

dialogs/linkchange.js


bsp;              label: 'Basic Settings',                 elements: [                     {                         type: 'text',                         id: 'txtchng',                         label: 'Text update',                         setup: function( element ) {                             this.setValue( element.getText() );    &nbs.

;      }                     }                 ]             }         ],         onShow: function() {             var selection = editor.getSelection();             var element = selection.getStartElement();             this.element = element;             if(element.$.nodeName === "A") { // Only if it's and anchor.                 this.setupContent( this.element );             } else {              &n.

p;editor.insertElement( txt );         }     }; });

The complete module can be found here you can take it as reference to implement yours.

www.chapterthree.com

Скачивание и установка модулей

Скачиваем и устанавливаем следующие модули: 

1. Модуль CKEditor (Переписать в /sites/all/modules/ckeditor)

2. Сам редактор CKEditor (скачиваем и записываем в /sites/all/modules/ckeditor/ckeditor)

3. Скачиваем SyntaxHighlighter и переписываем в папку /sites/all/libraries/syntaxhighlighter_3.0.83

4. Модуль SyntaxHighlighter (Переписать в /sites/all/modules/syntaxhighlighter)

5. Плагин SyntaxHighlight для CKEditor (папку _source разорхивировать в /sites/all/modules/ckeditor/ckeditor/, а папку plugins поместить в 2х местах: /sites/all/modules/ckeditor/ и /sites/all/modules/ckeditor/ckeditor/)


6. Для удаления и редактирования имен файлов на сервере необходимо два модуля:  IMCE_Mkdir и  IMCE_Rename

7. В разделе Модули (/admin/modules) установить  5 модулей — CKEditor, IMCE и SyntaxHighlighter, IMCE_Mkdir, IMCE_Rename

8. Также рекомендуется установить плагин для ckeditor Tableresize для изменения размеров таблицы.
  Содержимое архива плагина необходимо поместить в /sites/all/modules/ckeditor/plugins/tableresize
  а также прописать в конфигурационном файле /sites/all/modules/ckeditor/ckeditor.config.js

 config.extraPlugins = 'syntaxhighlight,tableresize';

Настройка SyntaxHighlighter

1. В настройках SyntaxHighlighter (admin/config/content/syntaxhighlighter) выбераем языки программирования, которые будут подсвечиваться

2. В файле /sites/all/modules/ckeditor/ckeditor.config.js меняем строку 27 и 100 (в CKEditor 3.6.3)

 config.extraPlugins = 'syntaxhighlight'; 
 ['DrupalBreak', 'DrupalPageBreak', 'Code']

3. В файле /sites/all/modules/ckeditor/ckeditor/config.js вставляем в блок функции CKEDITOR.editorConfig = function( config ) код (между скобками { }):

 config.extraPlugins = 'syntaxhighlight';  config.toolbar_Full.push(['Code']);

Настройка Форматов текста

Проверяем существуют ли у нас фильтры Full HTML и Filtered HTML. Конфигурация/Работа с содержимым/Форматы текста (/admin/config/content/formats)


Если их нет, создаем (+ галочка стоит, галочка снята):

Full HTML
Наименование: Full HTML
— анонимный пользователь
+ администратор

Включенные фильтры:
— Ограничение на разрешенные HTML теги
— Показывать любой HTML как обычный текст
— Преобразовать переводы строк в соответствующие HTML теги (т.е. <br> и <p>) (Конфликт с Syntax highlighter. Отключить, чтобы в коде не появлялись теги <BR>)
+ Преобразовать адреса в ссылки
+ Исправлять неправильный и обрезанный HTML
+ Syntax highlighter
 

Filtered HTML

Наименование: Filtered HTML
— анонимный пользователь
+ администратор

Включенные фильтры:
+ Ограничение на разрешенные HTML теги
— Показывать любой HTML как обычный текст
— Преобразовать переводы строк в соответствующие HTML теги (т.е. <br> и <p>)
+ Преобразовать адреса в ссылки
+ Исправлять неправильный и обрезанный HTML
+ Syntax highlighter

Настройка CKEditor

Администрирование/Конфигурация/Работа с содержимым/CKEditor (/admin/config/content/ckeditor)


  Глобальные настройки/Профиль CKEditor Global Profile
    Path to CKEditor: %m/ckeditor

  Расширенные настройки/Профиль Full/изменить
  Basic setup/
  Форматы текста:
    + Full HTML
    — Filtered HTML
    — Plain text
  Editor appearance/
    В разделе Кнопки  перетягиваем кнопку «code» на панель инструментов
    Plugins:
      + Plugin file: syntaxhighlight
    Язык: Russian
  File browser settings/
    File browser type: IMCE

Аналогично меняем профиль Advanced, выбрав Формат текста Filtered HTML

К статье прилагается файл ckeditorimcesyntaxhighlighter.rar в котором собраны вышеперечисленные модули в распакованном и разложенном по папкам виде. Также в этом архиве руссифицирован SyntaxHighlighter.

storvild.ru

Этот урок я нашел тут http://webmasters.ru/forum/f10/ustanovka-redaktora-i-fail-menedzhera-v-d…
По умолчанию, в системе управления сайтом Drupal нет встроенного текстового редактора, все теги разметки требуется вставлять вручную, поэтому для пользователей, которые плохо знакомы с HTML, создавать новые материалы на сайте проблематично.

К счастью, для Drupal создано несколько модулей, которые позволяют встроить WYSIWYG, или текстовой редактор в страницу создания материала. В этой статье, я расскажу, как установить очень популярный на данный момент WYSIWYG редактор под названием CKEditor на последнюю версию CMS Drupal на данный момент (7.8).

CKEditor позволяет довольно гибко и удобно редактировать и создавать страницы. Элементы его интерфейса почти ничем не отличаются от известных текстовых редакторов, таких как Microsoft Word или OpenOffice Writer.

http://s008.radikal.ru/i305/1110/f4/2159e17020a1.jpg

Итак, чтобы CKEditor работал на нашем сайте, нам нужно установить сам скрипт редактора, затем модуль, который бы подключал его к сайту.

1. Скачиваем модуль здесь — http://drupal.org/project/ckeditor выберете последний релиз для седьмой версии друпала.

2. Распакуйте архив в каталог site/all/modules вашего сайта (должна быть следующая структура site/all/modules/ckeditor)

3. Теперь скачаем и сам CKEditor с которым будет работать модуль. По адресу http://ckeditor.com/download скачайте последний релиз (на данный момент CKEditor 3.6.2)

4. Создайте папку libraries по адресу site/all/ и распакуйте туда архив (структура должна быть такая: site/all/libraries/ckeditor)

Всё, теперь включаем наш модуль и перейдём к его настройке:

Откройте Конфигурация > CKEditor > Глобальный профиль CKEditor > Изменить. Здесь в поле «Путь к CKEditor» проверьте, чтобы шаблон пути был %l/ckeditor. Это означает, что наш редактор распологается в папке libraries.

Если всё сделано правильно, то CKEditor уже работает, вы можете убедиться в этом, открыв страницу создания новой страницы. Вместо полей ввода текста появилось окошко редактора. Установка завершена.

2.Файловый Менеджер для Drupal 7 — Elfinder.

Кроме текстового редактора, во многих случаях, очень неудобно поддерживать сайт без штатного файлового менеджера, который так же отсутствует в Drupal по умолчанию.
Например, вы хотите поместить в текст картинку, для этого вам пришлось бы загружать по FTP изображение на сайт, и затем вставлять в нужное место, вручную прописывая адрес к нему (радует то, что уже установленный CKEditor хотя бы сам пропишет размеры). Или создать средствами друпала поле типа изображение, но его можно разместить только после или до текста.

С Elfinder всё выглядит так: нажимаете в CKEditor «вставить изображение», далее находите на сервере нужную картинку или прямо там закачиваете новую, и одним кликом вставляете её в нужное место.

http://s61.radikal.ru/i172/1110/25/93ddd1fd4115.jpg

Естественно, это работает не только для изображений, но и для любых файлов.
Итак, начнём установку, она похожа на то, что мы сделали первым пунктом. Нам снова нужен модуль и скрипт.

1. Скачиваем модуль здесь — http://drupal.org/project/elfinder (Обратите внимание, у меня иногда возникали проблемы с рекомендуемой версией, советую скачать dev-версию, помеченную красным, на данный момент — 7.x-1.x-dev.)

2. Распаковываем — site/all/modules/elfinder

3. За скриптом идём сюда — http://sourceforge.net/projects/elfinder/files/ , качаем последнюю версию (на данный момент elfinder-1.2.zip)

4. Распаковываем (site/all/libraries/elfinder), обратите внимание нужно переименовать папку «elfinder-1.2» просто в «elfinder»

5. Открываем конфигурацию Модули > elFinder > Настроить (admin/config/elfinder). В списке «Root directory», удобнее выбрать «Use system defaults», чтобы менджер работал с каталогом для пользовательских файлов установленным по умолчанию (а именно здесь admin/config/media/file-system, поле «Системная папка — открытая»).

6. Теперь на странце «Содержимое» (admin/content), появилась новая вкладка – Файлы, открыв её, если всё сделано правильно, вы увидите окно файлового менеджера.
Осталось только соединить elFinder и CKEditor.

http://i042.radikal.ru/1110/c4/0b1c0a69640a.jpg

Открываем знакомую страницу Конфигурация > CKEditor. Изменяем нужный профиль (а лучше все, которые есть по умолчанию: Full и Advanced). Там нам нужен раздел «Настройки обзора файлов». Выберете «File browser type > elFinder». Затем, если вам нужно вы можете поменять ту папку, куда будете загружать файлы, для этого вам нужно вставить нужный шаблон в поле ниже, там всё достаточно просто.

Теперь: создавая материал в CKEditor нажимая кнопку изображение, у вас появится «Выбор на сервере», нажимая на эту кнопку, вы наконец увидите окно elFinder. Всё работает, поздравляю настройка завершена!

drupal.ru

Руководство пользователя: как установить и настроить редактор 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. Скачать модуль  ]]>http://drupal.org/project/ckeditor]]>
Архив распакуйте в папку site/all/modules. Весь путь выглядит так: site/all/modules/ckeditor

2. Скачать редактор CKEditor 4.0 ]]>http://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):
Выбираем колор.

Выбрать цвет интерфейса ckeditor

Перетаскиваем нужные кнопочки.

Перетащить кнопки

Язык выбираем русский.

File browser settings
Выбираем по своему вкусу файловый менеджер, ниже по тексту есть установка и настройка файлового менеджера для друпал 7 – Elfinder.

Elfinder - файловый менеджер для удобной загрузки файлов.

2 шаг. Настройка профиля Full в редакторе ckeditor
Идем «Управление — конфигурация – ckeditor» —  admin/config/content/ckeditor
Оставить настройки можно по умолчанию, выбрать русский язык.

Самый простой вариант использовать Full (полный) и Advanced (расширенный) — для зарегистрированных, также ваши вариации. Создать для анонимных пользователей профиль Plain, где отметить автоматическое изменение html текста в простой формат.

профиль Plain

Немного из обзора друпал 7, такой мини положительный отзыв.
В семерке по умолчанию есть поле для загрузки рисунков. Очень полезная фишка. Каждому материалу можно присвоить картинку – своеобразный логотип. В анонсе эта картинка автоматически уменьшится.

 

Отзыв о друпал 7

Какие проблемы встречаются при работе с редактором

CKeditor показывает не все кнопки

Для этого проверьте, какую версию вы скачали на странице http://ckeditor.com/download

  • В пакете Basic Package — кнопок мало.
  • Standard Package — их больше.
  • Полный набор в пакете Full Package — скачивайте его, если хотите задействовать максимум.

Установка и настройка файлового менеджера Elfinder для Drupal 7

Связка из редактора и файлового менеджера сделают вашу работу наиболее приятной. Вы сможете в любое место вставить изображение с сервера или с компьютера. Присвоить ему нужные атрибуты, альтернативное описание. К сожалению и его нужно устанавливать.
Файловый менеджер CKEditor загрузит не только картинки, но и другие файлы.
Как и с редактором, нужно скачать модуль и скрипт.

  1. Скачать модуль ]]>http://drupal.org/project/elfinder]]>

Распаковать архив и поместить файлы в папку site/all/modules/elfinder

  1. Скачать скрипт ]]>http://sourceforge.net/projects/elfinder/files/]]>

Из последних версий подошло elfinder-1.2.
Затем распакуем архив и поместим файлы в папку site/all/libraries/elfinder
Здесь есть небольшая особенность, папку нужно назвать elfinder.

  1. Настраиваем. Для этого идем admin/config/elfinder – «конфигурация – модули – elFinder – настроить».

 

В «Root directory» оставляем выбор за «Use system defaults» — по умолчанию в друпал.

Умолчания друпал 7

Установки по умолчанию admin/config/media/file-system:

Где найти в друпал настройку пути сохранения файлов

На страничке «Содержимое» — admin/content, вы увидите новую вкладку «Файлы». Теперь достаточно по ней кликнуть и вы увидите интерфейс файлового менеджера.

Окно файлового менеджера

И последний шаг – это объединение редактора с файловым менеджером в один функциональный инструмент.
Выше я уже описала настройку профилей редактора.

Повторюсь:
Выбираем в File browser type — elFinder. При желании здесь же можно поменять папку для загрузки файлов.

Теперь все должно работать, а я никак не пойму, почему этого нет в ядре друпал? Вместо этого несколько вариантов редакторов на любой вкус. Что слишком хорошо. 😉

Загрузка файлов в друпал 7


Новая рабочая связка

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

Появляется глюк с добавлением новых пустот (<p> </p>) при каждом редактировании.

Выявлено, что глюк появляется при вставке тизера друпал. Если в статье не отделять анонс, то глюка нет.

Причина в том, что по умолчанию размер анонса уже настроен в типе материала. Получается двойное использование отделения анонса: ручное и автоматическое.

Путь к настройке показа анонса:

Совет. Следует при настройке внешнего вида визуального редактора убрать кнопочку тизер-друпал в обоих профилях .

www.master-live.ru

Суть проблемы в том, что в редакторе для Drupal 7 не корректно работает плагин Embed media, который сразу предлагается в комплекте. Данный плагин позволяет вставлять в свои тексты видео Youtube и других подобных сервисов. Добавляя в текст код (объект embed), он неизбежно выделяется пустыми тегами <p></p>.

Плагин Embed media

Каждая новая строка в редакторе это по умолчанию:

<p></p>

Вставляем в новую строку объект embed, получаем:

<p>  <div>embed</div>  </p>

На этом этапе все замечательно. Но сохраняем страницу и получаем в итоге:

<p>&nbsp;</p>  <div>embed</div>  <p>&nbsp;</p>

То есть никому не нужные отступы, а еще невозможность применить выравнивание для видео.

Например, если попытаться сделать центрирование то, получается вначале это:

<p стиль_центр>  <div>embed</div>  </p>

А потом, при сохранении страницы, и вовсе не рабочий код:

<p стиль_центр>&nbsp;</p>  <div>embed</div>  <p>&nbsp;</p>

Все это, к сожалению, следствие недоработок самого редактора Ckeditor. Попробовал в на официальном сайте. Редактор не переваривает, когда внутрь тега <p></p> вставляется <div></div>. Он ведет себя именно так, как показано выше.

Будет ли выпущена новая версия Ckeditor с исправлением? Не знаю. Но своими силами поправить ситуацию можно уже сейчас.

В файле sitesallmodulesckeditorpluginsmediaembedplugin.js поиском ищем все div и заменяем на span.

Теперь при вставке видео на страницу имеем код:

<p>  <span class="media_embed" height="360px" width="480px">  <iframe allowfullscreen="" frameborder="0" height="360px" src="http://www.youtube.com/embed/n1bxT..." width="480px"></iframe>  </span>  </p>

Замечательно работает выравнивание, код получается следующим:

<p стиль_центр>  <span class="media_embed" height="360px" width="480px">  <iframe allowfullscreen="" frameborder="0" height="360px" src="http://www.youtube.com/embed/n1bxT..." width="480px"></iframe>  </span>  </p>

Поскольку <span></span> — это строчный тег, то для него в стилях надо установить display:block. Например, так:

.media_embed { display:inline-block; }

d1mon.com

Настройка CKEditor

Переходим в меню Конфигурация → Работа с содержимым → CKEditor. Сначала посмотрим что нам предлагают глобальные настройки. Пропускаем выбор шкурок и переходим к самому интересному — Расширенным настройкам.

Первым и единственным обязательным пунктом является Path to CKEditor — путь до CKEditor. Здесь может быть любой внешний URL. По умолчанию стоит cdn — оптимальный вариант если только у вас нет причин использовать свой вариант.

Local path to CKEditor — путь до CKEditor на вашем сервере. Указываем или абсолютный путь или относительно файла index.php

Далее также определяется место расположения плагинов и файл менеджера CKFinder. В описании каждого пункта настройки есть список «заменителей» и адрес соответствующий текущим настройкам.

Также в глобальных настройках можно включить агрегацию(не рекомендуется) и включить/выключить drag-and-drop при настройке интерфейса. Отключение drag-and-drop не такая уж и бесполезная функция, как может показаться. Пример из личного опыта. Во время настройки редактора я перестарался с подключением/отключением плагинов. В какой-то момент у меня перестала отображаться кнопка для вставки кода. Отключив перетаскивательный интерфейс я прописал название кнопки в ручную и кнопка появилась. Главное знать как называются кнопки.

Переходим к настройкам профилей. Доступны они стой же страницы Конфигурация → Работа с содержимым → CKEditor.

В базовых настройках отмечаем для каких режимов форматирования доступен этот профиль. В разделе безопасности перечислены какие фильтры применены. О фильтрах расскажу позже.

Editor appearance — внешний вид редактора. Прежде всего выбираем кнопки. Если в глобальных настройках включён drag-and-drop то кнопки можно перетаскивать мышкой. С помощью вертикальных и горизонтальных линий группировать кнопки. Также в этом блоке настроек можно разрешить включать/отключать редактор(Show the disable/enable rich text editor toggle) и скрывать кнопки делая их видимыми по клику(Toolbar state on startup). Далее идёт выбор цветовой схемы. Можно выбрать одну из представленных или настроить свою.

За счёт списка плагинов можно прокачать редактор добавив дополнительные возможности. Некоторые плагины достаточно подключить(счётчик знаков и слов) и они будут работать. Для некоторых нужно добавить кнопку, как на пример для плагина вставки картинок через IMCE. Я бы не рекомендовал использовать этот плагин о причинах читайте в следующем разделе про добавление картинок. Для некоторых нужно ещё настроить фильтры как например для плагина вставляющего код. Если чего-то не работает не спешите всё валить на плагин. Последними в данном блоке идут языковые настройки.

Следующий блок настроек Advanced content filter. Здесь включаются фильтры и задаются параметры фильтрации для вводимого содержимого. Я предпочитаю настраивать фильтры в режимах форматирования.

Блок настроек Cleanup and output определяет ввод и вывод содержимого. По умолчанию настройки установлены так что при нажатии на Enter будет создаваться новый абзац а при Enter + Shift перенос строки в текущем абзаце. Плюс к этому можете настроить опции форматирования HTML кода. Внешне ваше содержимое от этого не измениться. В блоке настроек CSS определяется внешний вид редактора. Выбираете один из вариантов или указываете путь до css файла.

File browser settings — выбираем файл менеджер для вставки картинок. Я пользуюсь IMCE. Если вам по душе CKFinder то здесь же можно указать папку для закачиваемых файлов.
В дополнительных настройках можно разрешить CKEditor заменять вставляемый HTML как простой текст и включить проверку орфографии.

Загрузка изображений в CKEditor — IMSE vs CKFinder

За загрузку картинок у меня отвечает IMCE. Я не стал заморачиваться с CKFinder потому что он платный. Да у него есть демоверсия. Не знаю ограничена она только по функционалу или ещё и по времени. Самый главный минус — чтобы всё заработало нужно лезть в конфигурационные файлы. С IMCE таких проблем нет. Ставим модуль, выбираем IMCE как файл-менеджер в настройках CKEditor и можем работать.

Перейдём в меню Конфигурация→ Мультимедиа → IMCE.

IMCE

Первым идёт список профилей. IMCE может наделять пользователя большими правами по управлению файлами. Чтобы левые люди не воспользовались ими, в IMCE предусмотрены профили. К ним мы вернёмся позже. Дальше идёт список ролей пользователей и соответствующие им профили. Не достаточно в настройках CKEditor указать IMCE как файл-менеджер и добавить кнопку. Здесь нужно явно задать какой роли какой профиль соответствует. Последними идут общие настройки. С них и начнём.

Первое что нам предлагают это подключить IMCE к полям не имеющим редактора. Нужно вписать через запятую ID таких полей, после чего под полем появиться ссылка по клику на которую можно будет закачать картинку. Далее идёт включение абсолютных URL для файлов. Ещё один интересный пункт — как поступать с файлами с одинаковым названием. По умолчанию новый файл будет переименовываться.

В следующем пункте выбираем каким образом будут создаваться превьюшки. Они могут быть или отмасштабированы или отмасштабированы с последующей обрезкой. Во втором случае превьюшка всегда будет заданного размера.

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

настройка дирректорий в IMCE

В поле адрес папки можно вписать PHP код для создания адресов. IMCE будет сам создавать папки для пользователей. Инструкция как это сделать есть под таблицей.  Такой подход к созданию папок удобен тем, что файлы пользователей лежат по отдельным папкам а не в общей куче. Очень удобно если на сайте много пользователей с правом на добавление контента. Можно пойти дальше и не ограничиваться просто созданием директории с именем пользователя а добавить в неё вложенные директории с датой. В поле адрес папки вписать php: return $user->name.’/’.date(‘m-Y’); В итоге в адресе кроме имени пользователя будет текущий месяц и год. Каждый месяц будет создаваться новая папка. Для чего это нужно? Помните в настройках квот можно указывать максимальный объём для папки и для пользователя в целом. Ограничив пользователя рано или поздно вы столкнетесь с проблемой что пользователь исчерпает свой лимит и тут нужно либо удалять файлы либо увеличивать квоту. Мы сделаем лучше. Ограничим объём загружаемых файлов для папки, а общую квоту сделать безлимитной. Получается что у нас есть месячная квота на объём загружаемых файлов при этом безлимит на весь аккаунт.

IMCE кроме закачки/вставки картинок может изменять их размеры. Ресайз картинок создаст дополнительную нагрузку на сервер поэтому давать пользователям разрешение на ресайз не лучшая идея. Тем более не стоит разрешать ресайз если на Drupal сайте настроены адаптивные изображения. Это делает ресайз бессмысленным.

Последним пунктом идёт настройка превьюшек. Каким образом они будут уменьшаться определяется в общих настройках, а здесь просто указывается имя, размер и префикс.
Чтобы вставить изображение нужно в редакторе нажать на кнопку, затем в открывшемся окне нажать «выбрать файл на сервере» после этого вам откроется окно с IMCE. В CKEditor есть плагин позволяющий пропустить этот шаг. Подключаете в настройках редактора плагин и добавляете кнопку IMCE. Теперь файл менеджер доступен сразу по клику на кнопке. Это немного упрощает добавление изображений. Но если вы на своём сайте настроили адаптивные изображения так делать не рекомендуется. Изображения вставленные напрямую через IMCE вставляются через тег <img>, а не через <picture>. Я не советую использовать этот плагин.

Фильтры в CKEditor

Что такое фильтры, зачем они нужны и как их настраивать описано в статье про TinyMCE. Кроме дефолтных фильтров можно поставить дополнительные, например HTML Purifier. Как видно из описания этот фильтр удаляет вредоносный код и делает HTML мягким и шелковистым. Для работы модуля нужна библиотека HTML Purifier. Распаковывать библиотеку можно как в папку sites/all/libraries так и в папку с модулем. Все подробности на странице с модулем или в ридмике.

После подключения модуля в настройках текстового формата появятся два новых фильтра. Для некоторых настроек достаточно выбрать да/нет а для некоторых нужно прописывать условия вручную. Узнать как правильно записать условие можно кликнув по названию настройки. HTML Purifier отличается от стандартных фильтров Drupal. Например разрешив тег <img> вы не сможете вставить картинку. Оказывается что кроме тега нужно ещё разрешить его атрибут src. В настройках HTML в поле Allowed записать  img[src|alt|title] Теперь можете смело добавлять картинки с альтами и тайтлами. По умолчанию HTML Purifier пропускает некоторые теги но, как только вы добавили хотя бы одно правило, установки по умолчанию отключаются.

HTML Purifier после подключения добавляет два фильтра. Для тонкой настройки лучше выбрать расширенную (advanced) версию, для быстрой и простой настрой настройки — обычную. Не нужно включать одновременно две версии.

Как я уже говорил HTML Purifier проверяет HTML на валидность и в случае не соответствия стандартам исправляет. Вроде бы полезная функция но вот картинки вставленные через <picture> он не пропустит.

webonlife.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.