如何自定义Rails ActionText Trix编辑器默认配置 移除不需要的功能按钮

最优方案：预覆盖Trix默认配置（无多余DOM生成） #

该方案直接修改Trix初始化前的全局配置，编辑器生成工具栏时就不会创建你不需要的按钮，完全避免后期DOM操作的问题。
Rails项目中可将以下代码放在app/javascript/application.js的import "@rails/actiontext"语句之后：

// 获取Trix默认按钮组配置
const defaultGroups = Trix.config.toolbar.getDefaultButtonGroups()

// 自定义过滤逻辑，删除不需要的按钮
const processedGroups = defaultGroups.map(group => {
  return {
    ...group,
    // 数组中填入你要移除的按钮标识，示例为移除撤销、重做按钮
    buttons: group.buttons.filter(btnKey => !['undo', 'redo'].includes(btnKey))
  }
})

// 覆盖默认按钮组配置
Trix.config.toolbar.getDefaultButtonGroups = () => processedGroups

如果需要新增sub、sup等自定义按钮，可以在上述过滤逻辑中直接添加到对应按钮组，无需单独监听trix-initialize事件，示例：

const processedGroups = defaultGroups.map(group => {
  // 将上下标按钮添加到文本格式组
  if (group.name === 'text') {
    // 此处可复用你之前写好的sub、sup按钮注册逻辑
    group.buttons.push('sub', 'sup')
  }
  return {
    ...group,
    buttons: group.buttons.filter(btnKey => !['undo', 'redo'].includes(btnKey))
  }
})

常见默认按钮对应标识参考 #

• 撤销：undo
• 重做：redo
• 加粗：bold
• 斜体：italic
• 删除线：strike
• 链接：link
• 引用：quote
• 行内代码/代码块：code
• 无序列表：bullets
• 有序列表：numbers
• 减少缩进：outdent
• 增加缩进：indent
• 附件上传：attachFiles

兜底方案：初始化阶段直接移除DOM #

如果因为项目特殊原因无法修改全局配置，可以在trix-initialize事件回调中直接删除对应按钮DOM，该事件触发时工具栏DOM刚生成还未挂载到页面，比trix-initialized阶段操作性能更好：

document.addEventListener("trix-initialize", (event) => {
  const toolbar = event.target.toolbarElement
  // 选中要移除的按钮直接删除
  toolbar.querySelectorAll('[data-trix-action="undo"], [data-trix-action="redo"]').forEach(el => el.remove())
})

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