CKEditor

Матеріал з Wiki.Zina
Версія від 12:59, 27 квітня 2022, створена >Zina (→Панель инструментов)
(різн.) ← Попередня версія | Поточна версія (різн.) | Новіша версія → (різн.)
Перейти до навігації Перейти до пошуку

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

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

Модуль для 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, можно его сконфигурировать, чтобы убрать мусор и добавить необходимое.

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

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

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

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

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

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

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

Настроить

[ред. | ред. код]

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

  • Noindex External Links — фильтр для добавления внешним ссылкам атрибута «nofollow».
    Включить на странице модуля /admin/settings/noindex_external_links: "Add attribute rel="nofollow" to links". По умолчанию «nofollow» будет добавляться всем ссылкам, кроме собственного домена.
  • Video Filter — фильтр для добавления видео

Настроить «Форматы ввода» /admin/settings/filters: «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

[ред. | ред. код]

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

Fields to exclude/include: 

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

Плагины

[ред. | ред. код]

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

[ред. | ред. код]

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

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

<?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>";
?>

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

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

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

[ред. | ред. код]

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

Все, теперь видео из 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: /admin/config/content/formats/manage/full_html 

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


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

[ред. | ред. код]


1.

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

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. Настроить типовую панель кнопок

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

  // 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']
   ];

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

Там же: 

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

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

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

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' );}

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

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

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
        });
});

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

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

Cleanup and output -> Font formats: 

 h2;h3;h4;p;pre;address

Ссылки

[ред. | ред. код]
Отримано з https://mediawiki.zina.run/index.php?title=CKEditor&oldid=403