Создание темы Quill.js

Я хочу обновить только внешний вид, а не функциональность, поэтому теоретически я мог бы просто добавить кучу переопределений для темы Snow по умолчанию, но это не идеально.

Я не уверен, что переопределение всех классов (их много!) является лучшим решением, чем переопределение того, который вы хотите.

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

НО при этом, если вы действительно хотите создать свою пользовательскую тему, я настоятельно рекомендую расширить существующие темы Snow или Bubble, это довольно просто.

(Примечание: в Wisembly Jam мы делаем и то, и другое: мы создали новую тему для обработки значков темы Bubble и заменяем их нашими , и мы сильно переопределяем нужные классы)

NewTheme.js

// thx SO https://stackoverflow.com/questions/44625868/es6-babel-class-constructor-cannot-be-invoked-without-new
import BubbleTheme, { BubbleTooltip } from 'quilljs/themes/bubble'
import icons from 'quilljs/ui/icons'

class NewTheme extends BubbleTheme {
  extendToolbar (toolbar) {
    this.tooltip = new LoopTooltip(this.quill, this.options.bounds)
    this.tooltip.root.appendChild(toolbar.container)

    // you could override Quill's icons here with yours if you want
    this.buildButtons([].slice.call(toolbar.container.querySelectorAll('button')), icons)
    this.buildPickers([].slice.call(toolbar.container.querySelectorAll('select')), icons)
  }
}

class NewThemeTooltip extends BubbleTooltip {
}

NewThemeTooltip.TEMPLATE = [
  '<a class="ql-close"></a>',
  '<div class="ql-tooltip-editor">',
  '<input type="text" data-formula="e=mc^2" data-link="https://yoururl.com" data-video="Embed URL">',
  '</div>',
  '<span class="ql-tooltip-arrow"></span>'
].join('')

export { NewThemeTooltip, NewTheme as default }

App.js

import Quill from 'quill'
import NewTheme from './themes/NewTheme'
Quill.register('themes/newTheme', NewTheme, true)

const quill = new Quill(editorNode,{theme: 'newTheme'})