Stan's blog

Js

Пользовательский класс (class) параграфа (тег <p>) в редакторе Quill для верхнего уровня

15 июля 2024
Кандинский: Генерация по запросу "Как сделать так, чтобы редактор Quill понимал пользовательский class у тегов <p>" 
import Quill from 'quill'

const BlotBlock = Quill.import('blots/block')

class MyClassBlock extends BlotBlock{
    static blotName = 'myClassBlock'  // для кнопки
    static tagName = 'p'
    static className = 'myClass'

    static formats() {
        return true
    }
}

Quill.register(MyClassBlock);
Осталось добавить кнопку 
toolbar: {
    container: {
        ["myClassBlock"]
    }
}
Добавить картинку можно так:
const icons = Quill.import("ui/icons")
cons["myClassBlock"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10"></polygon>
    <path class="ql-stroke" d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"></path>
  </svg>`