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

Question

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

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

Quill Editor 本身只提供一个 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>