>Zina: /* Панель инструментов */

2022-04-27T12:59:56Z

Панель инструментов

Нова сторінка

Установка и настройка CKEditor в Drupal.

# Модуль для Drupal
# Сам CKEditor
#* CDN
#* Тонкая настройка и загрузка только необходимого
# Настройка
#* Отключить CKEditor в полях админки (неактуально для 7?)
#* Фильтры ввода
# Загрузка картинок
# Дополнительные плагины

== Модуль для Drupal ==

drush dl ckeditor video_filter && drush -y en ckeditor video_filter
drush l10n-update-refresh && drush l10n-update

== Сам CKEditor ==

=== Быстрая загрузка с CDN ===

admin/config/content/ckeditor/editg — в секции «Расширенные настройки» — «Путь к CKEditor» ввести:

//cdn.ckeditor.com/4.4.5.1/standard

Номер версии взять на http://cdn.ckeditor.com/

=== Тонкая настройка и загрузка только необходимого ===

Прежде, чем скачивать CKEditor, можно его сконфигурировать, чтобы убрать мусор и добавить необходимое.

# http://ckeditor.com/download
# Выбрать «Or let me customize CKEditor» и нажать «Customize & Download CKEditor»
# «Choose preset» — «Standard»
# Select your plugins and skin
## Убрать из левой колонки:
### About CKEditor
### Accessibility Help
### SpellCheckAsYouType (SCAYT)
### WebSpellChecker
## Добавить из правой колонки:
### Content Templates
### Justify
### List Style
### Show Blocks
## Вместе с плагинами справа будут автоматически добавлены такие плагины: Dialog, Dialog User Interface, Fake Objects, Floating Panel, Indent / Outdent, List Block, Menu, Panel, Popup, Rich Combo, UI Button
# Finalize and download — добавить справа языки интерфейса.

Содержимое архива нужно положить внутрь папки модуля Drupal /sites/all/modules/ckeditor в еще одну папку ckeditor — то есть путь будет такой:

/sites/all/modules/ckeditor/ckeditor/

Там в папке уже лежит файл COPY_HERE.txt, который как бы намекает.

== Настройка ==

Настройки CKEditor сохраняются в виде профилей здесь: admin/config/content/ckeditor

По умолчанию есть 3 профиля:

* Advanced
* Full
* CKEditor Global Profile

Сначала настроим глобальный профиль:

admin/config/content/ckeditor/editg

* Use toolbar Drag&Drop feature — [*] Отключено

В качестве основного рабочего профиля будем использовать профиль Advanced:

admin/config/content/ckeditor/edit/Advanced

=== Фильтры ввода ===

----

=== Скачать ===

==== Быстрая установка и загрузка с CDN ====

admin/config/content/ckeditor/editg — в секции «Расширенные настройки — Путь к CKEditor» ввести:

//cdn.ckeditor.com/4.4.5.1/standard

Номер версии взять на http://cdn.ckeditor.com/

==== Тонкая настройка и загрузка с сайта ====

Модуль для Drupal: https://www.drupal.org/project/ckeditor

Его распаковать как обычно в Друпале — /sites/all/modules/ckeditor/

Включить модуль: <code>/admin/build/modules</code>

Сам CKEditor: http://ckeditor.com/download. Прежде, чем скачивать, нужно его сконфигурировать, чтобы убрать ненужное и добавить нужное.

# Выбрать «Or let me customize CKEditor» и нажать «Customize & Download CKEditor»
# «Choose preset» — «Standard»
# Select your plugins and skin
## Убрать из левой колонки:
### About CKEditor
### Accessibility Help
### SpellCheckAsYouType (SCAYT)
### WebSpellChecker
## Добавить из правой колонки:
### Content Templates
### Justify
### List Style
### Show Blocks
## Вместе с плагинами справа будут автоматически добавлены такие плагины: Dialog, Dialog User Interface, Fake Objects, Floating Panel, Indent / Outdent, List Block, Menu, Panel, Popup, Rich Combo, UI Button
# Finalize and download — добавить справа языки интерфейса.

Содержимое архива нужно положить внутрь папки модуля Друпала в еще одну папку ckeditor — то есть путь будет такой: /sites/all/modules/ckeditor/ckeditor/ (там, в папке модуля, уже лежит файл COPY_HERE.txt, который как бы намекает).

Помимо официальной сборки CKEditor, потребуются еще плагины:

* '''upload_image''' — самописный простой загрузчик картинок на сайт.
* '''video_filter''' — вставка видео YouTube с помощью специального тэга [video: ].
* '''htmlbuttons''' — плагин для создания простых кнопок для вставки заранее заготовленного текста или HTML кода. Например, кнопка дя вставки спецтэга [video: ].

=== Настроить ===

Установить дополнительные модули Drupal:

* [https://www.drupal.org/project/noindex_external_links Noindex External Links] — фильтр для добавления внешним ссылкам атрибута «nofollow».<br />Включить на странице модуля <code>/admin/settings/noindex_external_links</code>: "Add attribute rel="nofollow" to links". По умолчанию «nofollow» будет добавляться всем ссылкам, кроме собственного домена.
* [https://www.drupal.org/project/video_filter Video Filter] — фильтр для добавления видео

Настроить «Форматы ввода» <code>/admin/settings/filters</code>: «Filtered HTML» → «настроить», включить фильтры:

* Noindex External Links filter
* HTML корректор
* Video Filter
* Преобразователь переводов строки
* Фильтр HTML

«Filtered HTML» → «настроить» → перейти на вкладку «Настроить» («Конфигурировать Filtered HTML»):

* отключить «Показывать справку HTML» (все равно обычных пользователей это только пугает)
* отключить «Защита от спамерских ссылок»
* в опциях «Video filter» указать:
** размер — 640 х 360
** Default autoplay setting — нет
** Related videos setting — нет
** Use HTML5 — да

=== Отключить CKEditor в формах админки Drupal ===

<code>/admin/settings/ckeditor</code> Visibility settings → Use inclusion or exclusion mode → Exclude

Fields to exclude/include:

*admin/*
*edit.edit-nodewords-description

=== Плагины ===

==== upload_image — загрузчик картинок ====

1. В корне сайта создать папку <code>/images/</code> с правами 777.

2. Создать файл <code>/sites/all/modules/ckeditor/plugins/upload_image/upload.php</code> с таким кодом:

<pre>
<?php
$callback = $_GET['CKEditorFuncNum'];
$file_name = $_FILES['upload']['name'];
$file_name_tmp = $_FILES['upload']['tmp_name'];
$file_new_name = $_SERVER['DOCUMENT_ROOT'].'/images/';
$full_path = $file_new_name.$file_name;
$http_path = '/images/'.$file_name;
$error = '';
if( move_uploaded_file($file_name_tmp, $full_path) ) {
} else {
$error = 'Some error occured please try again later';
$http_path = '';
}
echo "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(".$callback.", \"".$http_path."\", \"".$error."\" );</script>";
?>
</pre>

3. В файле <code>/sites/all/modules/ckeditor/ckeditor.config.js</code> перед закрывающей скобкой <code>};</code> добавить строку с путем к файлу <code>upload.php</code>:

// Image uploader
config.filebrowserUploadUrl = '/sites/all/modules/ckeditor/plugins/upload_image/upload.php';

==== video_filter — вставка видео безопасным для Drupal тэгом ====

Это нужно потому, что Drupal из соображений безопасности в режиме ввода «Filtered HTML» по умолчанию блокирует тэги <iframe> и <object>. А если использовать модуль «WYSIWYG Filter» (который нужен, чтобы управлять атрибутом ссылок «nofollow»), то в нем вообще никак нельзя разрешить эти тэги.

* Скачать модуль для Drupal: https://www.drupal.org/project/video_filter
* Установить в Drupal.

Все, теперь видео из YouTube можно вставлять, добавляя ссылку в спецтэг [video:] — например, так: [video:https://www.youtube.com/watch?v=9bZkp7q19f0] или так: [video:http://youtu.be/9bZkp7q19f0]

В папке модуля /sites/all/modules/video_filter/editors/ckeditor есть плагин для CKEditor, но мы им пользоваться не будем, слишком громоздкий. Вместо этого мы с помощью плагина htmlbuttons сделаем простую кнопку для вставки тэга [video:].

==== htmlbuttons — создание простых кнопок для вставки текста ====

Скачать: http://ckeditor.com/addon/htmlbuttons

Распаковать в папку /sites/all/modules/ckeditor/plugins/htmlbuttons

Положить в эту же папку файлы иконок для кнопок.

Добавить в файл ckeditor.config.js строки:

config.htmlbuttons = [
{
name:'videofilter',
icon:'youtube.png',
html:'[video: ]',
title:'Ссылка на видео YouTube'
},
{
name:'obzor',
icon:'obzor-15.png',
html:'<a href="http://www.obzor.lg.ua/">Луганский Обзор</a>',
title:'Ссылка на Обзор'
}
];

Добавить кнопки на панель инструментов профиля CKEditor: /admin/settings/ckeditor/edit/Advanced -> «Editor appearance»:

['videofilter','obzor'],

== Панель инструментов ==

В Drupal: <code>/admin/config/content/formats/manage/full_html</code>

[
['PasteText'],
['Undo'],
['Format'],
['RemoveFormat','Bold','Italic','-','Link','-','Blockquote','-','NumberedList','BulletedList','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','videofilter','Table','obzor'],
['Maximize'],
['Source']
]

=== Желательные плагины (не заработали) ===

* AJAX uploader http://xdan.ru/project/ckplugins/#uploader

1.

В файл <code>ckeditor.config.js</code> добавить строки:

CKEDITOR.editorConfig = function(config) {
...
config.disableNativeSpellChecker = false; // включаем браузерную проверку орфографии
config.allowedContent = true; // отключаем режим Advanced Content Filter (фильтрация опасных тэгов)
...
};

1. В админке заходим: /admin/settings/ckeditor -> профиль Advanced -> редактировать.

2. «Security» — должен быть выбран «Filtered HTML» или иной, который используется у вас для ввода с ограничением по тегам.

3. «Cleanup and output» — поправить «Font formats» (список стилей):

p;h2;h3;h4;h5;h6

— то есть убираем div, address, pre и h1.

4. «Дополнительные настройки» («Advanced options»):

— «Force pasting as plain text» — «Включено»;

— в блоке «Пользовательская конфигурация JavaScript» вводим:

config.allowedContent = true; // отключаем режим Advanced Content Filter (фильтрация опасных тэгов)
config.removePlugins = 'scayt'; // отключаем ненужные плагины
config.scayt_autoStartup = false; // отключаем встроенную в CKEditor проверку орфографии

== Старая версия CKEditor ==

'''1. Настроить типовую панель кнопок'''

Файл <code>drupal/sites/all/modules/ckeditor/ckeditor.config.js</code>

<pre>
// This toolbar should work fine with "Filtered HTML" filter
config.toolbar_DrupalFiltered = [
['PasteFromWord','PasteText','RemoveFormat'],
['Format'],
['Bold','Italic','Underline'],
['NumberedList','BulletedList','Outdent','Indent','Blockquote','JustifyLeft','JustifyCenter','JustifyRight'],
['Link','Unlink'],
['Image','Table','SpecialChar'],
['DrupalBreak', 'DrupalPageBreak'],
['Maximize']
];
</pre>

'''2. Настроить минимальную панель кнопок'''

Там же:

config.toolbar_DrupalBasic = [ [ 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList','BulletedList', '-', 'Link', 'Unlink', 'Image' ] ];

'''3. Убрать лишние вкладки в диалогах добавления ссылки и картинки'''

Там же, добавить в самый конец файла:

<pre>
CKEDITOR.on( 'dialogDefinition', function( ev ){
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'link' ){dialogDefinition.removeContents( 'advanced' );dialogDefinition.removeContents( 'target' );dialogDefinition.removeContents( 'upload' );}
if ( dialogName == 'image' ){dialogDefinition.removeContents( 'advanced' );dialogDefinition.removeContents( 'Link' );}
if ( dialogName == 'flash' ){dialogDefinition.removeContents( 'advanced' );}
</pre>

'''4. Убрать annoing отступы и переводы строк внутри тэгов'''

Там же, добавить в конец файла:

<pre>
CKEDITOR.on( 'instanceReady', function( ev ) {
$(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'div', 'address']).each(function(i, tag) {
ev.editor.dataProcessor.writer.setRules(tag,
{
indent : false,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
});
});
ev.editor.dataProcessor.writer.setRules( 'pre',
{
indent : false,
breakBeforeOpen : true,
breakAfterOpen : true,
breakBeforeClose : false,
breakAfterClose : true
});
ev.editor.dataProcessor.writer.setRules( 'li',
{
indent : false,
breakBeforeOpen : true,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
});
});
</pre>

'''5. Сократить список стилей'''

Друпал -> <code>/admin/settings/ckeditor</code> -> Поля профилей -> редактировать.

Cleanup and output -> Font formats:

h2;h3;h4;p;pre;address

== Ссылки ==

* [http://www.drupal.ru/node/45592 Хорошая инструкция с примерами настроки] использования CKEditor в Drupa, в т.ч. как написать/подключить плагин
* [http://ru-quadrata.livejournal.com/1458.html Расширяем функционал CKEditor]

CKEditor - Історія редагувань

>Zina: /* Панель инструментов */