TailwindCSS фреймворк

Это CSS-фреймворк с открытым исходным кодом, созданный Адамом Уэтеном и поддерживаемый Tailwind Labs. Особенность этой библиотеки в том, что, она не предопределяет CSS-классы отдельных элементов. Вместо этого она предоставляет служебные классы, которые можно объединять для стилизации каждого элемента

Это высокоуровневый, интерпретируемый язык программирования, который используется в основном для разработки веб-приложений. Он был создан в 1995 году и изначально предназначался для добавления интерактивности и динамики на веб-страницы.

CSS (Таблица каскадных стилей)

Это язык стилизации, который используется для описания внешнего вида и форматирования документов, написанных на HTML и XML (включая такие языки разметки, как SVG и XHTML). CSS позволяет веб-разработчикам и дизайнерам разделять содержание веб-страниц и их визуальное представление, что упрощает создание и поддержку сайтов.

JSON (JavaScript Object Notation)

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

Текстовый редактор quill, что это

Это текстовый редактор, который работает по принципу WYSIWYG (What you see is what you get. Легковесный и легко расширяемый JS фреймворк. Отлично подходит для встраивания на сайты.

Как quill работает

Для того чтобы работать quill разбивает текст на, так называемые blot-ы (кляксы) и хранит их в специальном формате, называемом delta. Данный формат очень сильно напоминает JSON. Редактируют и модифицируют дельту, quill модули и форматеры, вне зависимости от того, как представленна разметка на сайте.

Удалить все

ЗАГРУЗКА ...

Содержание

Quill formats (ql-formats), как их переопределить и какие виды существуют

24.10.2024

02.10.2025

3 минуты

848

Теги:

Quilljs

Quill formats, что это такое и их виды

Форматеры в quill, это набор правил, которые говорят, то как форматировать тот или иной blot, какие тултипы и стили применять. Quilljs, предоставляет широкий спектр в выборе типов форматирования текста (дальше я буду их называть форматеры). Виды форматеров в quill:

formats/align
formats/background
formats/blockquote
formats/bold
formats/italic
formats/strike
formats/underline
formats/code
formats/code-block
formats/code-block-container
formats/code-token
formats/color
formats/direction
formats/font
formats/formula
formats/header
formats/image
formats/indent
formats/link
formats/list
formats/list-container
formats/script
formats/size
formats/table
formats/table-body
formats/table-container
formats/table-row
formats/video

Для тех, кого интересует откуда я взял этот список, то на странице моего html-редактора откройте консоль браузера и введите Quill.imports. Вы увидите весь список того, что можно импортировать и соответственно переделать под свои нужды.

Некоторые из них являются лишь составной частью и не могут использоваться в отрыве от других. Такими форматерами являются:

formats/list-container
formats/table-body
formats/table-container
formats/table-row
formats/code-block
formats/code-block-container
formats/code-token

Для некоторых разработан специльный модуль tooltip, при помощи которого некоторые форматеры вообще имеют смысл. Этот тултип работает и настроен для:

formats/link
formats/video
formats/image
formats/formula

Можно сразу забежать в перёд и сказать что для любого кастомного редактора этот тултип будет бесполезен из-за того, что он намертво прикреплён к тем 4 форматерам. И нам придётся создавать его с нуля. Чем мы в этой статье и займёмся.

Несколько слов о форматерах

Про шрифт и его размер. Или то как переопределять форматеры с несколькими вариантами выбора

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

let Font = Quill.import('formats/font') Font.whitelist = ['open-sans', 'roboto-slab', 'advent-pro'] Quill.register(Font, true) // Ага, размер шрифта, это аттрибутор. let Size = Quill.import('attributors/style/size') Size.whitelist = ['16px', '14px'] Quill.register(Size, true)

После чего добавить/изменить форматеры на html страничке:

<span class="ql-formats"> <select class="ql-font"> <option value="open-sans" selected>Open Sans</option> <option value="advent-pro">Advent Pro</option> <option value="roboto-slab">Roboto Slab</option> </select> <select class="ql-size"> <option value="16px" selected>16px</option> <option value="14px">14px</option> </select> </span>

Теперь, необходимо добавить следующие стили:

/* Font stuff */ #toolbar-container .ql-font span[data-label="Open Sans"]::before { font-family: var(--family-main_font); } #toolbar-container .ql-font span[data-label="Advent Pro"]::before { font-family: var(--family-acent_font); } #toolbar-container .ql-font span[data-label="Roboto Slab"]::before { font-family: var(--family-title_font); } .ql-font-open-sans { font-family: var(--family-main_font); } .ql-font-advent-pro { font-family: var(--family-acent_font); } .ql-font-roboto-slab { font-family: var(--family-title_font); } /*Size stuff */ #toolbar-container .ql-size span[data-value="16px"]::before { font-size: var(--size-main_font); } #toolbar-container .ql-size span[data-value="14px"]::before { font-size: var(--size-mini_font); } .ql-size-16px { font-size: var(--size-main_font) !important; } .ql-size-14px { font-size: var(--size-mini_font) !important; }

После чего у вас будет работающий селектор шрифтов и размеров.

Про таблицы, formats/table

По умолчанию, quill не предоставляет никакого интерфейса или тултипа для создания таблиц. Вернее, можно только создать 1х1 табличку, что не очень то полезно. Тебе придётся самому добавлять возможность удаления и вставки рядов и столбцов.

Чтобы получить возможность использовать таблицы, для начала нужно подключить соответствующий модуль.

const quill = new Quill('#editor', { modules: { syntax: true, clipboard: true, table: true, // Подключаем модуль таблицы toolbar: { container: '#toolbar-container', } }, theme: 'snow', });

Дальше нужно будет создать либо тултип, либо любой другой интерфейс для взаимодействия с модулем. Тут можно будет посмотреть на то, как я сделал тултип для таблиц.

Про видео, formats/video

По умолчанию, данный форматер поддерживает вставку видео через ссылку на соответствующий ресурс. Что на самом деле имеет некоторое преимущество перед вставкой непосредственного видеофайла.

Про изображения, formats/image

А вот изображения quill встраивает в саму страницу. С одной стороны это круто, можно сразу посмотреть как данное изображение будет выглядеть на сайте, а с другой это сильно увеличивает вес страницы, что сказывается на скорости, что в свою очередь сказывается на SEO показателях. Мне такой вариант, не подходит. Вот тут можно посмотреть как я переписал форматер для изображений под себя.

Как сделать и(или) переопределить существующий форматер, на примере ссылки

Это на самом деле очень просто. Нужно лишь следовать определённым правилам. Первое и основное правило, имя статической переменной blotName, того класса от которого вы наследуетесь, будет использоваться в качестве селектора при его нажатии. Сейчас объясню на примере такого форматера как ссылка.

let Link = Quill.import('formats/link') class InternalLink extends Link { constructor(scroll, domNode){ super(scroll, domNode); domNode.addEventListener('click', (ev) => { domNode.setAttribute('ref', 'me') domNode.classList.add('internal_link') }) } } InternalLink.blotName = 'internal-link' Quill.register({'formats/internal-link': InternalLink})

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

Что дальше? А дальше переходим на html-страницу и добавляем в твой toolbar соответствующий код:

Чтобы quill понял какой форматер использовать, нужно обозвать его соответствующим классом. Так же, потребуется иконка для кнопки, её можно добавить вот так:

var icons = Quill.import("ui/icons"); icons["internal-link"] = readFile(`${PATH}PostEditor/img/paragraph.svg`)

Это важно, quill использует svg файлы и в этот словарь иконок нужно отправлять не путь к файлу, а его содержимое.

Я написал соответствующую функцию для чтения содержимого любых файлов. Чуть ниже я оставлю пример реализации.

Как сделать собственный quill link tooltip(тултип для ссылок)

Следующая статья

Всё о quill blots (кляксах)

Предыдущая статья

Не забудь поделиться, лайкнуть и оставить комментарий)

Внешние ссылки

Другое

Использованные термины

TailwindCSS фреймворк ⟶ Это CSS-фреймворк с открытым исходным кодом, созданный Адамом Уэтеном и поддерживаемый Tailwind Labs. Особенность этой библиотеки в том, что, она не предопределяет CSS-классы отдельных элементов. Вместо этого она предоставляет служебные классы, которые можно объединять для стилизации каждого элемента
Javascript ⟶ Это высокоуровневый, интерпретируемый язык программирования, который используется в основном для разработки веб-приложений. Он был создан в 1995 году и изначально предназначался для добавления интерактивности и динамики на веб-страницы.
CSS (Таблица каскадных стилей) ⟶ Это язык стилизации, который используется для описания внешнего вида и форматирования документов, написанных на HTML и XML (включая такие языки разметки, как SVG и XHTML). CSS позволяет веб-разработчикам и дизайнерам разделять содержание веб-страниц и их визуальное представление, что упрощает создание и поддержку сайтов.
JSON (JavaScript Object Notation) ⟶ Это лёгкий формат обмена данными, который легко читается и пишется человеком, а также легко парсится и генерируется программами. Он основан на подмножестве языков программирования JavaScript, но используется во множестве языков и технологий.

Релевантные вопросы

Текстовый редактор quill, что это Это текстовый редактор, который работает по принципу WYSIWYG (What you see is what you get. Легковесный и легко расширяемый JS фреймворк. Отлично подходит для встраивания на сайты.
Как quill работает Для того чтобы работать quill разбивает текст на, так называемые blot-ы (кляксы) и хранит их в специальном формате, называемом delta. Данный формат очень сильно напоминает JSON. Редактируют и модифицируют дельту, quill модули и форматеры, вне зависимости от того, как представленна разметка на сайте.