RoR 6中Trix编辑器定制问题：保存后样式丢失

问题分析 #

1. 红色文本样式消失：Action Text默认会过滤HTML内联样式（style属性），导致保存后<span style="color: red;">被清理成普通<span>。
2. 列表项目符号丢失：前端展示时，样式只作用于编辑器（.trix类），但Action Text渲染的内容容器是.trix-content，原有样式未覆盖到展示区域。

解决方案 #

1. 修复红色文本样式 #

方法一：允许Action Text保留内联样式（快速方案）

在config/initializers/action_text.rb中添加配置，允许style属性：

# 允许内容中保留style属性
Rails.application.config.action_text.content_attributes_whitelist.add 'style'

注：此方法会放宽内容安全策略，若需更严格的控制，推荐方法二。

方法二：用Tailwind类代替内联样式（推荐）

修改trix_customization.js，将内联样式替换为Tailwind的红色类：

Trix.config.textAttributes.red = {
  className: "text-red-600",
  parser: function(element) {
      return element.classList.contains("text-red-600")
  },
  inheritable: true
}

同时确保工具栏有红色按钮（若未添加），在trix_toolbar_post_controller.js的connect方法中插入按钮HTML：

const redButtonHTML = '<button type="button" class="trix-button" data-trix-attribute="red" title="Red Text">Red</button>'
// 插入到H3按钮之后
const sibling3 = toolbar.querySelector("[data-trix-attribute='subHeading']")
sibling3.insertAdjacentHTML("afterend", redButtonHTML)

2. 修复列表项目符号样式 #

修改actiontext.scss，将样式选择器从.trix改为.trix-content，覆盖展示区域：

.trix-content ul {
  list-style-type: disc;
  padding-left: 2.5rem;
}

.trix-content ol {
  list-style-type: decimal;
  padding-left: 2.5rem;
}

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