创建 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.

我不确定重新定义所有类（有很多！）是一个更好的解决方案，而不是覆盖你想要的那个。

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

但是话虽这么说，如果你真的想创建你的自定义主题，我强烈建议扩展现有的 snow 或 bubble 主题，这非常简单。

（注意：在 Wisembly Jam 我们两者都做了：我们创建了一个新的主题来处理 Bubble 主题图标并将它们替换为我们的，并且我们重写了所需的类）

NewTheme.js

// thx SO 
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'})

创建 Quill.js 主题

Creating a Quill.js theme

quill