Есть ли способ переопределить значки svg Quill?

Question

Я использую последнюю версию quill.js, и было интересно, если есть способ, чтобы переопределить иконки SVG Quill использует при создании редактора панелей инструментов (для темы пузырем, если это имеет значение.)

Я попробовали заглянуть и посмотреть, где в источнике определены значки, но похоже, что они передают либо массив параметров панели инструментов, либо сами определяют разметку, и передают селектор в toolbar, оба вставляют значки svg.

Есть ли способ настроить это поведение без необходимости захвата источника Quill и выполнения пользовательской сборки? Что-то вроде того, как можно сделать, например. Quill.import('formats/link') для настройки sanitize()?

Answer 1

Значки в теме пузыря inline here.

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

В этом примере я заменяю жирный значок шрифтом - удивительный жирный значок. Не забудьте также загрузить шрифт-awesome CSS-файл.

var icons = Quill.import('ui/icons'); 
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>'; 
// create the editor: var quill = new Quill('#editor-container', {}); 

В этом примере я заменить жирный значок на СВГ круг:

var icons = Quill.import('ui/icons'); 
icons['bold'] = '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100"/></svg>'; 
// create the editor: var quill = new Quill('#editor-container', {}); 

Answer 2

Copy Паста из вопроса from github: (не пробовал с пузырем):

Quill создает кнопки с .ql- * классами для каждого зарегистрированного стиля в конфиге. Вы можете переопределить пустые кнопки, нацеливания этих классов с помощью CSS, как показано ниже (для значка вложения):

.ql-attachment { 
    background: no-repeat scroll 50% 50% transparent !important; 
    background-image: url("attachment.svg") !important; 
    text-align: center; 
} 

.ql-attachment:hover { 
    background-image: url("attachment-hover.svg") !important 
} 

Answer 3

Quill JS позволяет настроить панель инструментов. Вы можете использовать шрифт awesome, собственные SVG или пользовательские функции. Вот guidelines с образцом.

кнопку Создать на панели инструментов

<div id="tooltip-controls"> 
    <button id="bold-button"><i class="fa fa-bold"></i></button> 
    : 
</div> 

blot Создать

class BoldBlot extends Inline { } 
BoldBlot.blotName = 'bold'; 
BoldBlot.tagName = 'strong'; 

событий Ручка нажмите

$('#bold-button').click(function() { 
    quill.format('bold', true); 
}); 

Регистрация с перу

Quill.register(BoldBlot); 

Проверить на codepen