如何修改Froala Editor v4的加粗按钮标签为<b>？

这个需求完全可以实现，有两种常用方案：

方案一：直接覆盖默认格式配置 #

初始化编辑器时，通过formats选项重写加粗功能的标签设置，这是最简单的方式：

new FroalaEditor('#editor', {
  formats: {
    bold: {
      tag: 'b',  // 将默认的strong替换为b
      class: null,
      attributes: {}
    }
  }
});

配置后，点击加粗按钮时，编辑器会自动使用<b>标签包裹选中内容，替代默认的<strong>。

方案二：重写加粗命令逻辑 #

如果需要更灵活的控制（比如添加额外操作），可以通过commands选项重写加粗命令的执行逻辑：

new FroalaEditor('#editor', {
  commands: {
    bold: {
      callback: function () {
        // 切换<b>标签的应用状态
        this.toggleFormat('b');
      },
      // 确保按钮的激活状态正确更新
      refresh: function ($btn) {
        const isBoldActive = this.selection.isApplied('b');
        $btn.toggleClass('fr-active', isBoldActive);
      }
    }
  }
});

验证效果 #

配置完成后，选中内容点击加粗按钮，查看编辑器生成的HTML代码，确认是否已替换为<b>标签。如果使用编辑器的html.get()方法获取内容，也能直接看到<b>标签。

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