Quill formats для редактора. Как их переопределить и какие виды существуют

Часы
24.10.2024
Часы
19.12.2024
Часы
3 минуты
Глазик
137
Сердечки
0
Соединённые точки
0
Соединённые точки
0
Соединённые точки
0

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

Форматеры в quill, это набор правил, которые говорят, то как форматировать тот или иной blot, какие тултипы и стили применять. Quilljs, предоставляет широкий спектр в выборе типов форматирования текста (дальше я буду их называть форматеры). Виды форматеров в quill:
  1. formats/align
  2. formats/background
  3. formats/blockquote
  4. formats/bold
  5. formats/italic
  6. formats/strike​
  7. formats/underline
  8. formats/code
  9. formats/code-block
  10. formats/code-block-container
  11. formats/code-token
  12. formats/color
  13. formats/direction
  14. formats/font
  15. formats/formula
  16. formats/header
  17. formats/image
  18. formats/indent
  19. formats/link
  20. formats/list
  21. formats/list-container
  22. formats/script
  23. formats/size
  24. formats/table
  25. formats/table-body
  26. formats/table-container
  27. formats/table-row
  28. formats/video
Для тех, кого интересует откуда я взял этот список, то на странице моего html-редактора откройте консоль браузера и введите Quill.imports. Вы увидите весь список того, что можно импортировать и соответственно переделать под свои нужды.
Некоторые из них являются лишь составной частью и не могут использоваться в отрыве от других. Такими форматерами являются:
  1. formats/list-container
  2. formats/table-body
  3. formats/table-container
  4. formats/table-row
  5. formats/code-block
  6. formats/code-block-container
  7. formats/code-token
Для некоторых разработан специльный модуль tooltip, при помощи которого некоторые форматеры вообще имеют смысл. Этот тултип работает и настроен для:
  1. formats/link
  2. formats/video
  3. formats/image
  4. 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 соответствующий код:
<span class="ql-formats">
<button class="ql-internal-link"></button>
</span>
Чтобы quill понял какой форматер использовать, нужно обозвать его соответствующим классом. Так же, потребуется иконка для кнопки, её можно добавить вот так:
var icons = Quill.import("ui/icons");
icons["internal-link"] = readFile(`${PATH}PostEditor/img/paragraph.svg`)
Это важно, quill использует svg файлы и в этот словарь иконок нужно отправлять не путь к файлу, а его содержимое.
Я написал соответствующую функцию для чтения содержимого любых файлов. Чуть ниже я оставлю пример реализации.
function readFile(file) {
var rawFile = new XMLHttpRequest();
var result = ""
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function () {
if(rawFile.readyState === 4) {
if(rawFile.status === 200 || rawFile.status == 0) {
result = rawFile.responseText;
}
}
}
rawFile.send(null);
return result
}
сердце
облачко
облачко
облачко
письмо

Комментарии

(0)
captcha
Отправить
Сейчас тут пусто. Буть первым (oﾟvﾟ)ノ

Другое

Похожие статьи

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

Часы
24.10.2024
В этой статье я расскажу о том, какие виды blot-ов бывают, чем каждый из них отличается, как используется ( в том числе и примеры реализации данных quill blot-ов). А так …

Собственный quill tooltip, как сделать и как работает

Часы
25.10.2024
В этой статье ты найдёшь пример того как реализовать свой quill тултип и поймёшь как это вообще работает. Для примера взяты тултипы для ссылок