React中如何修改Froala编辑器工具栏按钮图标？

要把Froala编辑器的加粗按钮图标换成react-icons里的FaCss3Alt，按以下步骤操作：

1. 安装依赖 #

先确保项目里装了react-icons包：

npm install react-icons
# 或者用yarn
yarn add react-icons

2. 导入所需模块 #

在你的编辑器组件文件里，导入图标组件和ReactDOMServer（用来把React图标转成HTML字符串）：

import { FaCss3Alt } from 'react-icons/fa6';
import ReactDOMServer from 'react-dom/server';

3. 修改Froala配置 #

3.1 定义自定义按钮 #

在配置里添加customButtons字段，创建一个自定义的加粗按钮，绑定原有加粗命令，同时把React图标转成HTML作为按钮图标；

3.2 替换工具栏按钮 #

把toolbarButtons里原来的"bold"换成自定义按钮的名称（比如"customBold"）

完整配置示例：

const config = {
  toolbarButtons: {
    // 把原有的"bold"替换成"customBold"，其他按钮按需保留
    default: ["customBold", "italic", "underline", "strikeThrough", "|", "paragraphFormat"],
    // 你的其他工具栏配置...
  },
  customButtons: {
    customBold: {
      title: "加粗", // 鼠标悬停时的提示文字，和原按钮保持一致
      icon: ReactDOMServer.renderToString(<FaCss3Alt className="froala-custom-icon" />),
      command: "bold", // 执行原有的加粗命令
      refreshAfterCallback: true
    }
  },
  // 你的原有配置无需改动
  imageAllowedTypes: ["jpeg", "jpg", "png"],
  height: "434",
  width: "100%",
  quickInsertEnabled: false,
  videoInsertButtons: ["videoBack", "|", "videoByURL", "videoUpload"],
  paragraphFormat: {
    N: "Normal",
    heading1: "Heading 1",
    H2: "Heading 2",
  },
};

4. 调整图标样式（可选） #

转成HTML的图标可能大小和原有工具栏图标不匹配，添加CSS调整样式：

.froala-custom-icon {
  width: 16px;
  height: 16px;
  color: #333; /* 和原有工具栏图标颜色保持一致 */
}

这样就能把加粗按钮的图标换成你想要的FaCss3Alt了。

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