Статья CKEditor 5

Автор - zabariap

Из подраздела - Код

CKEditor 5 — это современный JavaScript-фреймворк для работы с форматированным текстом (WYSIWYG). Он написан с нуля на TypeScript и построен на архитектуре MVC с пользовательской моделью данных и виртуальным DOM. Его ключевое преимущество — модульная, плагин-ориентированная архитектура, которая позволяет гибко настраивать редактор под конкретные задачи.

CKEditor 5 официально поддерживает многие фронтенд-библиотеки и фреймворки. Для них есть готовые пакеты, которые упрощают подключение.

Для работы с HTML-контентом в Django удобнее всего использовать пакет django-ckeditor-5 — это официальная и актуальная интеграция редактора CKEditor 5. Он позволяет добавлять в формы и админ панель удобный WYSIWYG-редактор с поддержкой форматирования текста, загрузки изображений, таблиц и блоков кода. 

Установка, подключение, внедрение в модели описаны в интернете, но при отображение полей с CKEditor5Field  воникает проблема с форматом изображений.

Создавая формы создания и редактирования полей модели применяется виджет 

widget.attrs.update({'class': 'django_ckeditor_5'})

Этот код добавляет CSS-классdjango_ckeditor_5к виджету поля формы в Django. Чаще всего его используют, чтобы корректно отобразить и инициализировать визуальный редактор CKEditor 5 в поле формы. 

Это не вызывает проблем, но при отображения поля в котором есть картинки, то формат этих картинок сбрасывается и она отображается в исходном размере, при этом атрибуты текста сохраняются.

Поиск решений в интернете не дал результатов, но в некоторых учебных материалах с примерами эта проблема не возникала.

Анализируя коды примеров, обратил внимание на  class="img-fluid" в теге <img>, который и восстанавливает заданный формат картинки. Дальнейший анализ кода вывел на загружаемый файл JS, который добавляет к тегу <img> этот класс.

Чтобы реализовать данный механизм в своем коде на странице отображения полей модели  полю с вложенными изображениями присвоил class="card-img" и в скрипте указал ссылку на файл JS. 

<script src="{% static 'js/arduino/script.js' %}"></script><!--скрипт восстанавливает форматирование картинок в ckeditor5 -->

В самом файле написал функцию:

window.onload = function () {
   // находим первый элемент у которого есть класс card-img
   var entryContent = document.querySelector('.card-img');
   //найти все теги <img>, которые являются потомками элементов <figure>
   var paragraphs = entryContent.querySelectorAll('figure img');
   for (var i = 0; i < paragraphs.length; i++) {
       var image = paragraphs[i];
       var imageUrl = image.getAttribute('src');

       // Добавляем класс img-fluid к изображению с этим классом восстановился заданный формат изображения.
       image.classList.add('img-fluid');

   }

};