Quill кастомные кнопки и выпадающие списки

Часы
25.10.2024
Часы
18.12.2024
Часы
2 минуты
Глазик
95
Сердечки
0
Соединённые точки
0
Соединённые точки
0
Соединённые точки
0

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

Добавить кнопку в toolbar очень просто. Quill имеет специальный словарь, где хранит иконки для своего интерфейса. Чтобы получить доступ к этому словарю импортируй:
var icons = Quill.import("ui/icons");
Теперь можно получить и сохранить любую SVG иконку. Чтобы добавить свою иконку, нужно сохранить её содержание. Для чтения содержания любого файла, я создал соответствующую функцию readFile:
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
}

icons["attention"] = readFile(`${PATH}PostEditor/img/blockAttention.svg`)
После чего можно её использовать. Но как, спросишь ты? Quill использует специальные наименования. Чтобы иконка была применена, необходимо добавить соответствующий класс-селектор. Конкретно в моём примере это будет выглядеть вот так:
<button class="ql-attention"></button>
Чтобы от кнопки был хоть минимальный толк, можно привязать к ней специальный обработчик. Этот обработчик имеет точно такое же имя, как и имя кнопки. Вот так данный обработчик добавляется:
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 редакторе. Ну а теперь точно пока （＾∀＾●）ﾉｼ
сердце
облачко
облачко
облачко
письмо

Комментарии

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

Другое