CKEditor и Drupal 7 - решение проблемы адаптивности изображений

Категория: Drupal
Дата публикации: 24 ноября, 2014 - 19:08
Последнее изменение: 2 апреля, 2018 - 17:49

По-умолчанию визуальный редактор CKEditor (проверялось на версии редактора 4.4.5 + AdaptiveTheme) добавляет к каждой вставленной картинке стили с указанием ее ширины и высоты в пикселях:

CKEditor адаптивность картинок

Это не дает картинке адаптироваться (масштабироваться) при изменении размеров окна браузера. Она пытается адаптироваться, но указанные размеры в пикселях приводят к ее искажению:

CKEditor адаптивность картинок

Чтобы исправить эту проблему, нужно немного настроить CKEditor.

В папку plugins (/sites/all/libraries/ckeditor/plugins/) визуального редактора нужно поместить несколько плагинов. Вот эти плагины:
Update 02.04.2018 В последних версиях CKEditor теперь требуется установка ТОЛЬКО image2, и соответственно в настройках тоже надо указывать только активацию image2.

http://ckeditor.com/addon/lineutils
http://ckeditor.com/addon/widget (в старой версии) и плюс http://ckeditor.com/addon/widgetselection (в новой версии)
http://ckeditor.com/addon/image2

С 2017 в новых версиях вместо widget используется widgetselection.

Затем, на странице настройки профилей (на примере формата Full HTML это - /admin/config/content/ckeditor/edit/Full) в самом низу есть раскрывающиеся настройки "Дополнительные настройки".
Туда нужно вставить следующее:

config.extraPlugins = 'lineutils';
config.extraPlugins = 'widget';
config.extraPlugins = 'widgetselection';
config.extraPlugins = 'image2';

CKEditor адаптивность картинок

Теперь в визуальном редакторе вместо стандартной вставки изображений работает плагин image2, он уже не добавляет высоту, ширину в пикселях, что позволяет картинкам адаптироваться без искажений и других проблем.

CKEditor адаптивность картинок
CKEditor адаптивность картинок

Комментарии

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