富文本编辑器工具栏怎么自定义按钮？

宇文梓睿提问于 2026-02-28 15:29:19 阅读 24

组件

我用的是 Quill.js，想在工具栏加个“插入表情”按钮，但文档看得有点懵。试过按官网例子改配置，但新加的按钮点不了，也没触发事件。

现在工具栏配置是这样的：

const toolbarOptions = [
  ['bold', 'italic'],
  ['link', 'image'],
  // 想在这里加个 'emoji' 按钮
];

是不是光写配置不够？还得注册模块或者绑定 handler？求指条明路！

我来解答赞 5 收藏

反馈

1 条解答

❤梦幻 Lv1

哈，这个问题我之前也踩过坑！你说得没错，光在配置数组里加个字符串是没用的，Quill 又不是你肚子里的蛔虫，哪知道你那个 'emoji' 要干啥。

核心就两步：配置里声明按钮，然后绑定 handler 告诉它点击后干啥。

给你一个能跑的例子：

const toolbarOptions = [

  ['bold', 'italic'],

  ['link', 'image'],

  ['emoji']  // 自定义按钮名称

];



const quill = new Quill('#editor', {

  theme: 'snow',

  modules: {

    toolbar: {

      container: toolbarOptions,

      handlers: {

        emoji: function() {

          // 这里的 this 指向 toolbar 实例

          const quill = this.quill;

          

          // 获取当前光标位置

          const range = quill.getSelection();

          const index = range ? range.index : 0;

          

          // 插入内容，这里简单插入个 emoji 文本

          quill.insertText(index, '😊');

          quill.setSelection(index + 1);

        }

      }

    }

  }

});

还有个事儿，按钮默认是没样式的，你得自己写个 CSS 或者图标。比如给你的 emoji 按钮加个样式：

.ql-toolbar .ql-emoji::after {

  content: '😀';

  font-size: 16px;

}

如果你想动态添加 handler，也可以用 getModule 方法：

const toolbar = quill.getModule('toolbar');

toolbar.addHandler('emoji', function() {

  // 你的逻辑

});

这样就能跑了。希望能帮到你，Quill 的文档确实有点抽象，我当初也看了半天。

2026-02-28 21:07