quill编辑器替换toolbar图标

John Doe2024-09-122025-11-07

quill编辑器替换toolbar图标

quill 编辑器toolbar 的svg 在代码里面是写死的。代码如下

https://github.com/slab/quill/blob/b213e1073bac1478649f26e3c0dad50ad0eb2a49/packages/quill/src/themes/base.ts#L126

如果要替代图标。最简单的办法是在编辑器挂载后，直接替换html里的svg。

这里我想做更多操作。比如显示一个tooltip。在源码里面，

通过css进行处理

直接将原来的图标设置为定位，并将透明度设置为0.

<div id="quill-fake-toolbar">
        <NTooltip>
            <template #trigger>
                <span class="relative ql-toolbar-fake-btn">
                    <NIcon @click="onBold" class="tooltip-icon">
                        <SearchOutlined />
                    </NIcon>
                    <button class="ql-bold"></button>
                </span>
            </template>
            加粗
        </NTooltip>
    </div>
    
    
    <style lang="scss">
.ql-toolbar-fake-btn {
    &:has(.ql-active) {
        color: red;
    }
    > button[class^="ql-"] {
        position: absolute;
        top_img0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
    }
}
</style>

为什么类名要固定

https://github.com/slab/quill/blob/b213e1073bac1478649f26e3c0dad50ad0eb2a49/packages/quill/src/modules/toolbar.ts#L79

在quill 里面，是通过类名来进行format的。比如加粗。

在quill.ts 这个文件里面会先注册很多格式化操作。所以可以直接通过api进行调用。

1	quill.format('color', 'red');

API - Quill Rich Text Editor (quilljs.com)

而源码里面的toolbar也是通过api进行调用的。先从button上面取class. 加粗的类名是ql-bold 。然后取bold字符串，调用quill.format(’bold’);

选中状态的处理

点击加粗按钮或者将光标放到加粗过的字符支持件。加粗按钮会变色。是quill在button上面添加了一个ql-active 的类名。所以自定义图标也需要进行变色来识别是否已经选中相关功能。

可以通过子元素判断是否已经有ql-active 类名来判断。

所以上面就通过has选择其来处理样式

1
2
3

&:has(.ql-active) {
        color: red;
    }

光标修改后是如何高亮按钮的

在toolbar.ts 里面利用eventBus 监听了文档修改，然后更新ql-active 类名

this.quill.on(Quill.events.EDITOR_CHANGE, () => {
      const [range] = this.quill.selection.getRange(); // quill.getSelection triggers update
      this.update(range);
    });