如何在QuillJS v2.0.0-dev.4中手动触发内置H1等动作？

要在自定义下拉菜单里触发Quill的默认H1格式动作，直接调用Quill内置的quill.format()方法即可——H1对应的格式类型为header，值为1。同理，H2对应header:2，H5对应header:5。

修改你的Dropdown.onSelect方法如下：

Dropdown.onSelect = (label, value, quill) => {
    switch(true){
        case /^h1$/.test(value):  
                    quill.format('header', 1); // 触发默认H1格式动作
                 break;
        case /^h2$/.test(value):  
                    quill.format('header', 2); // 触发默认H2格式动作
                 break;
        case /^h5$/.test(value):  
                    quill.format('header', 5); // 触发默认H5格式动作
                 break;
        default:
                    quill.format('header', false); // 可选：取消选中的标题格式
    }
};

补充工具栏配置示例 #

如果你的自定义下拉菜单是通过HTML实现的，可以参考以下结构：

<div id="toolbar">
    <select class="ql-custom-header">
        <option value="h1">标题1</option>
        <option value="h2">标题2</option>
        <option value="h5">标题5</option>
        <option selected>正文</option>
    </select>
</div>
<div id="editor"></div>

然后在初始化Quill时绑定下拉菜单的选择事件：

const quill = new Quill('#editor', {
    theme: 'snow',
    toolbar: '#toolbar'
});

// 绑定下拉菜单选择事件
document.querySelector('.ql-custom-header').addEventListener('change', function() {
    const selectedValue = this.value;
    const selectedLabel = this.options[this.selectedIndex].text;
    Dropdown.onSelect(selectedLabel, selectedValue, quill);
});

内容的提问来源于stack exchange，提问作者Art