Создание темы Quill.js - PullRequest
Новая
       23

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

0 голосов
/ 02 мая 2018

Как мы создаем новые темы в Quill.js? Нужно ли расширять существующий?

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

Итак - как и где мы можем создать и зарегистрировать новую тему Quill.js?

1 Ответ

0 голосов
/ 11 мая 2018

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

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

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

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

(Примечание: на 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'})
...