rg-quill-editor

Quill Editor

Независимый модуль quill (Rich text editor) для редактирования основного контента в редакторском интерфейсе.

Пакет выделен в отдельный репозиторий по причине его переиспользуемости.

У этих проектов разный бэкенд и в каждом проекте используется разный API и разные фрэймворки для построения интерфейса, но интерфейс редактирования материала и его логика одинаковые. Поэтому следуя лучшим практикам разработки ПО выделяем общее неизменяемое от изменяемого. В нашем случае, изменяемым является способ общения с бэком и внешняя оболочка (приложение, где используется компонент редактирования).

Данный модуль является интерфейсом редактирования и имеет свой API, чтобы можно было общаться с ним и применять свой способ общения с бэком. Например, в редактуре 2019 года на Vue используются fetch запросы для обращения к серверным API, в 2020-м в проекте на React используется уже GraphQL спецификация. Наш проект должен дать возможность выбирать способ сохранения контента материала с помощью своего API. Все они описаны ниже. Информация для разработчиков модуля в файле CONTRIBUTING.md

Установка

npm i rg-quill-editor -S

Использование

HTML Разметка

<div id='quill-editor'></div>

Подключаем модуль

import QuillEditor from 'rg-quill-editor'

Использование в коде

let quillEditor = new QuillEditor(null, options, {
  text: "<p>Test</p>"
})

Если не передать первый параметр, то модуль будет рендерить всё в DOM элемент с id quill-editor. options - объект с опциями. Будет рассмотрен подробнее далее.

ВАЖНОЕ

• Мы используем ветку develop (в react), тк в stable версии (на данный момент 1.3.7) нет поддержки таблиц. В vue версии используется именно 1.3.7
• Мы используем форк quill - версию quill-ocean из-за проблемы, описанно в issue

Пояснение См изменения в core/quill.js disableFormattingOnPaste — вот эту штуку я добавил, без неё у нас всегда запрос на сохранение статьи отправлялся когда внутри что-то рендерилось просто.

МОЖЕТ БЫТЬ это можно было бы костыльнуть где-то ещё, но я как бы сделал так и это по нормальному. Ты теперь можешь просто зарегистрировать блот и у него нстройку сделать, чтобы библиотека не следила за измненеием высоты контента.

я как бы отключаю слежку за высотой блока, у тех блотов, где ты пишешь datasilent: true

Ссылка на коммит

Далее будут подробные примеры использования и описание всех API Work In Progress

Как собрать модуль для RgTextControls

Создаем отдельную дирректорию в src вида rg-[название]. Для примера возьмем rg-demo.

В ней будет набор файлов:

• RgDemoEditor это модуль попапа, который будет вызываться, при выборе из списка в редакторе. В нем зашита логика вставки сущности (она называется БЛОТ) в сам редактор.
• rg-demo-popup.html это шаблон попапа с размеченными контейнерами для дальнейшей отрисовки (некий шаблон из html). Используется в createBaseMarkup
• rg-demo-quill-blot это модуль (написанный по правилам Quill библиотеки), который и является вставкой в редактор текста. (будет работать после регистрации в системе, об этом будет написано ниже). Внутри себя он содержит веб-компонент, который конечный пользователь и видит в редактуре.
• rg-demo-wc это веб компонент, который видит пользователь, после вставки блота в редактор. В нем отображение всех данных + кнопки для редактирования-удаления-перемещения компонента по разметке тела материала.
• rg-demo.html это шаблон со стилями для веб компонента rg-demo-wc. В нем корневой контейнер (остальная разметка генерится внутри инициализации самого веб-компонента) и стили.