Это процесс создания визуального оформления и пользовательского интерфейса веб-сайтов и веб-приложений. Он включает в себя несколько ключевых аспектов таких как: Эстетика, Функциональность, Юзабилити, Адаптивность, Интерактивность, Оптимизация.

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

JSON (JavaScript Object Notation)

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

Это совокупность связанных между собой веб-страниц, доступных через интернет и имеющих одно общее доменное имя. Каждый веб-сайт может содержать текстовую информацию, изображения, видео и другие мультимедийные элементы. Веб-сайты могут выполнять различные функции, включая предоставление информации, общение, онлайн-торговлю и множество других взаимодействий.

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

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

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

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

Удалить все

ЗАГРУЗКА ...

Содержание

Как сделать кастомные/custom quill toolbar кнопки, quilljs

25.10.2024

02.10.2025

2 минуты

409

Теги:

Графический интерфейс

Quilljs

Добавляем кастомную кнопку

Добавить кнопку в toolbar очень просто. Quill имеет специальный словарь, где хранит иконки для своего интерфейса. Чтобы получить доступ к этому словарю импортируй:

var icons = Quill.import("ui/icons");

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

После чего можно её использовать. Но как, спросишь ты? Quill использует специальные наименования. Чтобы иконка была применена, необходимо добавить соответствующий класс-селектор. Конкретно в моём примере это будет выглядеть вот так:

Чтобы от кнопки был хоть минимальный толк, можно привязать к ней специальный обработчик. Этот обработчик имеет точно такое же имя, как и имя кнопки. Вот так данный обработчик добавляется:

const quill = new Quill('#editor', { modules: { toolbar: { container: '#toolbar-container', handlers: { //... другие обработчики 'attention': (value) => { // value в данном случае значит либо кнопка нажата - true, или нет - false if (value){ // некоторая логика }else{ // некоторая логика } } } } }, theme: 'snow', });

Добавляем кастомный выпадающий список

С выпадающим списком чуть по сложнее и я сейчас объясню почему. Всё дело в том, что quill активно налегает на CSS селекторы и без должной настройки стилей вы никуда не продвинетесь. Плюс я считаю, что тебе может потребоваться пару моих трюков, чтобы заставить работать селекторы правильно.

Это важно. Я не импортирую стили quill-а, ибо на моём сайте они выглядят странно. Да и принципы WYSIWYG редактора нарушается. Если вкратце, то что видишь, то и будет отображаться на итоговой странице. В моём случае, когда я писал в редакторе, то итоговая статья выглядит по другому. И чтобы этот эффект убрать, я полностью избавился от стилей со стороны QuillJS

HTML код будет выглядеть вот так:

<span class="ql-formats"> <select class="ql-type"> <option id="type-1" value="type-1" selected>Type One</option> <option id="type-2" value="type-2">Type Two</option> <option id="type-3" value="type-3">Type Three</option> </select> </span>

Дальше нужно добавить несколько стилей. Тебе возможно и не придётся их добавлять, ибо возможно такова особенность МОЕГО сайта, но если ничего не отображается, добавь этих стилей:

select.ql-type { background-color: #000; border: 2px solid white; padding: 5px; color: var(--ui_text_color); } select.ql-type > option{ background-color: #fff; } .ql-type{ /* По умолчанию quill добавляет display: none */ display: block !important; max-width: 150px; }

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

const quill = new Quill('#editor', { modules: { toolbar: { container: '#toolbar-container', handlers: { // Другие обработчики 'type': (value)=>{ // Сначала убираем selected аттрибут со всех кнопок document.querySelector(`#${value}`).parentElement.querySelectorAll('option').forEach( (option) => { option.removeAttribute('selected') }) // Потом добавляем к выбранному selected document.querySelector(`#${value}`).setAttribute('selected', true) } } } }, theme: 'snow', });

Айдишник не обязательно проставлять, но таким вот, не хитрым образом можно докрутить работу выпадающего списка в quill. Значение value в данном случае - это значение аттрибута тега <option>.

А у меня всё, надеюсь статья была полезна и нужна тебе. Все примеры кастомных кнопок ты сможешь найти на моём онлайн веб quill редакторе. Ну а теперь точно пока （＾∀＾●）ﾉｼ

Как сделать custom quill модуль оглавления статьи

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

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

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

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

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

Другое

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

Веб дизайн ⟶ Это процесс создания визуального оформления и пользовательского интерфейса веб-сайтов и веб-приложений. Он включает в себя несколько ключевых аспектов таких как: Эстетика, Функциональность, Юзабилити, Адаптивность, Интерактивность, Оптимизация.
Javascript ⟶ Это высокоуровневый, интерпретируемый язык программирования, который используется в основном для разработки веб-приложений. Он был создан в 1995 году и изначально предназначался для добавления интерактивности и динамики на веб-страницы.
JSON (JavaScript Object Notation) ⟶ Это лёгкий формат обмена данными, который легко читается и пишется человеком, а также легко парсится и генерируется программами. Он основан на подмножестве языков программирования JavaScript, но используется во множестве языков и технологий.
Вебсайт ⟶ Это совокупность связанных между собой веб-страниц, доступных через интернет и имеющих одно общее доменное имя. Каждый веб-сайт может содержать текстовую информацию, изображения, видео и другие мультимедийные элементы. Веб-сайты могут выполнять различные функции, включая предоставление информации, общение, онлайн-торговлю и множество других взаимодействий.

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

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