如何为Ruby on Rails Action Text的Trix富文本编辑器添加文本对齐选项？

文本对齐属于块级属性，你之前的方案失效有两个核心原因：一是错误配置到了textAttributes（行内文本属性）下，二是解析函数的样式判断字段写错，应该读取元素的textAlign样式而非不存在的alignLeft属性。

具体实现步骤 #

第一步：配置块级对齐属性 #

在application.js中添加如下配置，同时覆盖左、中、右三种对齐方式：

// 配置三种对齐方式为块级属性
Trix.config.blockAttributes.alignLeft = {
  style: { textAlign: "left" },
  parser: element => element.style.textAlign === "left",
  inheritable: true
}

Trix.config.blockAttributes.alignCenter = {
  style: { textAlign: "center" },
  parser: element => element.style.textAlign === "center",
  inheritable: true
}

Trix.config.blockAttributes.alignRight = {
  style: { textAlign: "right" },
  parser: element => element.style.textAlign === "right",
  inheritable: true
}

第二步：插入工具栏按钮 #

同样在application.js中添加工具栏插入逻辑，注意属性对应：

addEventListener("trix-initialize", function(event) {
  // 对齐按钮组HTML
  const alignButtons = `
    <div class="trix-button-group trix-button-group--text-align">
      <button type="button" data-trix-attribute="alignLeft" title="左对齐">左</button>
      <button type="button" data-trix-attribute="alignCenter" title="居中对齐">中</button>
      <button type="button" data-trix-attribute="alignRight" title="右对齐">右</button>
    </div>
  `
  // 插入到块工具按钮组的后方，符合工具栏交互逻辑
  event.target.toolbarElement.querySelector(".trix-button-group--block-tools").insertAdjacentHTML("afterend", alignButtons)
})

第三步：配置Action Text样式白名单 #

Rails的Action Text默认会过滤未授权的样式，需要在config/initializers/action_text.rb中添加text-align的允许规则，否则保存后样式会丢失：

Rails.application.config.after_initialize do
  ActionText::ContentHelper.allowed_attributes.add "style"
  ActionText::ContentHelper.allowed_styles.add "text-align"
end

修改完初始化文件后需要重启Rails服务生效。

第四步：可选的按钮样式优化 #

在全局CSS中添加如下规则，让选中的对齐按钮有明确的高亮状态：

.trix-button-group--text-align .trix-button[data-trix-active] {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

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