使用 JavaScript 向 Quill 编辑器添加自定义下拉工具

Question

请注意这是一个自我回答的问题。

Quill Editor 的工具栏模块似乎没有提供使用 JavaScript API 添加自定义工具的方法。您只能从预定义工具列表中进行选择，或者您必须完全重写整个 HTML 工具栏，这看起来很老套而且通常不是一个选项。由于该机制，工具不能仅在运行时添加或删除并且始终是静态的，这意味着（例如）您不能拥有在运行时加载或更改其条目的动态下拉列表。

Quill 编辑器本身仅提供 API 添加另一个模块。因此，您可以编写另一个工具栏模块来支持原始工具栏模块所缺少的上述功能，但是能够继续使用原始工具栏模块会更好，因为有效地重写它需要大量的工作。

问题是：如何将下拉菜单等潜在动态工具添加到现有 Quill Editor 实例的工具栏。

Answer 1

我编写了一个名为 DynamicQuillTools 的库来完成这项工作。

可以这样使用：

const dropDownItems = {
    'Mike Smith': 'mike.smith@gmail.com',
    'Jonathan Dyke': 'jonathan.dyke@yahoo.com',
    'Max Anderson': 'max.anderson@gmail.com'
}

const myDropDown = new QuillToolbarDropDown({
    label: "Email Addresses",
    rememberSelection: false
})

myDropDown.setItems(dropDownItems)

myDropDown.onSelect = function(label, value, quill) {
    // Do whatever you want with the new dropdown selection here

    // For example, insert the value of the dropdown selection:
    const { index, length } = quill.selection.savedRange
    quill.deleteText(index, length)
    quill.insertText(index, value)
    quill.setSelection(index + value.length)
}

myDropDown.attach(quill)

这是一个完整的演示，将自定义下拉工具和自定义按钮添加到 Quill Editor 实例：

// Create a Quill Editor instance with some built-in toolbar tools
const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
        toolbar: {
            container: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],

                [{ 'header': 1 }, { 'header': 2 }],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'script': 'sub' }, { 'script': 'super' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'direction': 'rtl' }],

                [{ 'size': ['small', false, 'large', 'huge'] }],
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

                [{ 'color': [] }, { 'background': [] }],
                [{ 'font': [] }],
                [{ 'align': [] }],

                ['clean'],
            ]
        }
    }
})


// Add a custom DropDown Menu to the Quill Editor's toolbar:

const dropDownItems = {
    'Mike Smith': 'mike.smith@gmail.com',
    'Jonathan Dyke': 'jonathan.dyke@yahoo.com',
    'Max Anderson': 'max.anderson@gmail.com'
}

const myDropDown = new QuillToolbarDropDown({
    label: "Email Addresses",
    rememberSelection: false
})

myDropDown.setItems(dropDownItems)

myDropDown.onSelect = function(label, value, quill) {
    // Do whatever you want with the new dropdown selection here

    // For example, insert the value of the dropdown selection:
    const { index, length } = quill.selection.savedRange
    quill.deleteText(index, length)
    quill.insertText(index, value)
    quill.setSelection(index + value.length)
}

myDropDown.attach(quill)


// Add a custom Button to the Quill Editor's toolbar:

const myButton = new QuillToolbarButton({
    icon: `<svg viewBox="0 0 18 18"> <path class="ql-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path></svg>`
})
myButton.onClick = function(quill) {
    // Do whatever you want here. You could use this.getValue() or this.setValue() if you wanted.

    // For example, get the selected text and convert it to uppercase:
    const { index, length } = quill.selection.savedRange
    const selectedText = quill.getText(index, length)
    const newText = selectedText.toUpperCase()
    quill.deleteText(index, length)
    quill.insertText(index, newText)
    quill.setSelection(index, newText.length)
}
myButton.attach(quill)

<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.bubble.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdn.quilljs.com/1.3.7/quill.snow.css"></link>
<script src="https://cdn.jsdelivr.net/gh/T-vK/DynamicQuillTools@master/DynamicQuillTools.js"></script>

<div id="editor">The last two elements in the toolbar are our custom tools. The first one (<b>Email Addresses</b>) is a simple drop down menu that inserts the email address of the person selected and the second one (<b>U</b>) is a simple button that makes the selected text uppercase.</div>

Answer 2

我知道这是旧的，但我只是偶然发现的 (https://quilljs.com/docs/modules/toolbar/)。解决方案是将 class“ql-size”添加到 select，如容器部分所示。

使用 JavaScript 向 Quill 编辑器添加自定义下拉工具

Adding a custom drop down tool to the Quill Editor with JavaScript

javascript

runtime

dynamic

quill

使用 JavaScript 向 Quill 编辑器添加自定义下拉工​​具

Adding a custom drop down tool to the Quill Editor with JavaScript

javascript

runtime

dynamic

quill

使用 JavaScript 向 Quill 编辑器添加自定义下拉工具