Froala编辑器自定义按钮点击后无法触发事件怎么办？

司徒文雅提问于 2026-01-26 03:23:26 阅读 51

组件

我用Froala给项目加了个自定义按钮，配置完之后按钮能显示出来也能点击，但绑定了click事件就是没反应。控制台也没报错，这是怎么回事啊？

代码是这样写的：<br>
<pre class="pure-highlightjs line-numbers"><code class="language-javascript"><code class="language-javascript">$('#editor').froalaEditor({
  buttons: ['custom_button'],
  events: {
    'click.custom_button': function (e) {
      console.log('按钮被点击了'); // 这行根本没执行
    }
  }
});
</code></code></pre>

我试过把事件改成’initialized’会触发，但点击按钮就是没反应。按钮HTML结构没问题，其他默认按钮的事件都能正常工作，就自定义的不行…

富文本编辑器

我来解答赞 4 收藏

反馈

2 条解答

胜洋 Lv1

这个问题我之前也遇到过，其实是Froala自定义按钮的事件绑定方式踩点坑。你现在的写法看似没问题，但其实**事件名写错了**，正确的事件名不是 click.custom_button，而是要用 custom_button.click。

Froala 的自定义按钮事件格式是：.click，不是 jQuery 那种命名空间写法。我当时也按常规思维写成 click.xxx，结果半天没反应。

改成这样就能触发了：

$('#editor').froalaEditor({

  buttons: ['custom_button'],

  events: {

    'custom_button.click': function (e) {

      console.log('按钮被点击了'); // 这下能执行了

    }

  }

});

另外再提一句，自定义按钮最好配合 toolbarButtons 或者 toolbarCustomButtons 注册一下按钮配置，不然有时候按钮存在但行为不完整。

希望这个血泪教训能帮你绕过去 😂

2026-02-03 18:11

IT人彦会 Lv1

你的问题我碰到过，Froala的自定义按钮确实有点坑。你现在的写法不对，不能直接在events里绑定点击事件，得用toolbarButtons和buttonDefinition来定义自定义按钮的行为。

下面是正确的写法：

$('#editor').froalaEditor({

  toolbarButtons: ['custom_button'],

  buttonDefinitions: {

    custom_button: {

      icon: '✔', // 可以换成自己的图标

      title: '自定义按钮',

      command: function () {

        console.log('按钮被点击了');

      }

    }

  }

});

关键点在这儿：
1. buttonDefinitions才是定义自定义按钮的地方，command属性就是点击时要执行的函数。
2. events里只能监听编辑器本身的事件，没法绑定按钮点击。

前端这块有时候文档看不仔细就容易踩坑，Froala的自定义按钮逻辑跟普通的事件绑定不太一样，得按它的套路来。试试上面的代码，应该就没问题了。

2026-01-29 10:03