quill - 创建 Quill.js 主题

Question

我们如何在 Quill.js 中创建新主题？我们是否必须扩展现有的？

我只想更新外观，而不是功能，所以理论上我可以为默认的 Snow 主题添加一堆覆盖，但这并不理想。

那么 - 我们如何以及在哪里创建和注册新的 Quill.js 主题？

Answer 1

I'm only looking to update the look, not the functionality so theoretically I could just add a bunch of overrides for the default Snow theme but that's not ideal.

我不确定重新定义所有类(有很多类!)是否是比覆盖您想要的类更好的解决方案。

定义和注册新主题并不能神奇地解决您的问题。新主题将允许您更深入地修改工具栏模板、按钮图标和一些行为。

但是话虽这么说，如果您确实想创建自定义主题，我强烈建议扩展雪或气泡现有主题，这非常简单。

(注意:在 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'})