创建一个Quill.js主题

Question

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

我只是想更新外观，而不是功能，因此从理论上讲，我可以为默认的Snow主题添加一堆替代项，但这并不理想。

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

Answer 1

我只是想更新外观，而不是功能，因此从理论上讲，我可以为默认的Snow主题添加一堆替代项，但这并不理想。

我不确定重新定义所有类（其中有很多！）是比覆盖所需类更好的解决方案。

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

但是要说的是，如果您真的想创建自定义主题，我强烈建议您扩展现有的雪花或气泡，这非常简单。

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

NewTheme.js

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