1

假设我想添加一个按钮来打开和关闭红色文本。

我已经完成了 ruby​​onrails.org上描述的基本 action_text 设置，但是，我对我的 application.js 文件进行了以下更改，以便将一个名为 RED 的按钮添加到工具栏并适当地设置它的样式：

// app/javascript/packs/application.js

var Trix = require("trix")
require("@rails/actiontext")

const {lang} = Trix.config;

Trix.config.toolbar = {
  getDefaultHTML() { return `\
<div class="trix-button-row">
  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="${lang.bold}" tabindex="-1">${lang.bold}</button>
    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="${lang.italic}" tabindex="-1">${lang.italic}</button>
    <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="${lang.strike}" tabindex="-1">${lang.strike}</button>
    <button type="button" class="trix-button" data-trix-attribute="red">RED</button>
  </span>
  <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
    <button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" title="${lang.quote}" tabindex="-1">${lang.quote}</button>
    <button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" title="${lang.code}" tabindex="-1">${lang.code}</button>
    <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="${lang.bullets}" tabindex="-1">${lang.bullets}</button>
    <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="${lang.numbers}" tabindex="-1">${lang.numbers}</button>
    <button type="button" class="trix-button trix-button--icon trix-button--icon-decrease-nesting-level" data-trix-action="decreaseNestingLevel" title="${lang.outdent}" tabindex="-1">${lang.outdent}</button>
    <button type="button" class="trix-button trix-button--icon trix-button--icon-increase-nesting-level" data-trix-action="increaseNestingLevel" title="${lang.indent}" tabindex="-1">${lang.indent}</button>
  </span>
  <span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools">
    <button type="button" class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" title="${lang.attachFiles}" tabindex="-1">${lang.attachFiles}</button>
  </span>
  <span class="trix-button-group-spacer"></span>
  <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
    <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="${lang.undo}" tabindex="-1">${lang.undo}</button>
    <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="${lang.redo}" tabindex="-1">${lang.redo}</button>
  </span>
</div>
<div class="trix-dialogs" data-trix-dialogs>
  <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
    <div class="trix-dialog__link-fields">
      <input type="url" name="href" class="trix-input trix-input--dialog" placeholder="${lang.urlPlaceholder}" aria-label="${lang.url}" required data-trix-input>
      <div class="trix-button-group">
        <input type="button" class="trix-button trix-button--dialog" value="${lang.link}" data-trix-method="setAttribute">
        <input type="button" class="trix-button trix-button--dialog" value="${lang.unlink}" data-trix-method="removeAttribute">
      </div>
    </div>
  </div>
</div>\
`; }
};

Trix.config.textAttributes.red = {
  style: { color: "red" },
  parser: function(element){
    return element.style.color === "red"
  }
 }

此时，红色样式将在创建或更新表单内容时按预期工作，但当我尝试在表单外部显示内容时红色样式停止工作 - 换句话说，<%= form.rich_text_area :content %>将正确显示红色文本，但<%= @message.content %>不会.

我做了一些研究，发现style在ActionText::ContentHelper. 我尝试将 style 属性列入白名单并成功，但仅通过将以下内容放入 config/initializers 文件中：

# config/initializers/action_text_config.rb

ActionText::ContentHelper.allowed_attributes << "style"

module ActionText
  class Content
  end
end

我的问题是：

  1. 有一个更好的方法吗？
  2. 如果我尝试通过放置<%= ActionText::ContentHelper.allowed_attributes.inspect %>在我的视图中来手动调试，为什么我找不到style我在初始化程序文件中添加的属性（即使<%= @message.content %>现在正确显示）？
  3. 为什么 Rails 需要在我的初始化程序文件中使用这个奇怪的空模块和类定义才能使其工作？显然它做了一些事情，因为当我将其注释掉时，红色文本停止在<%= @message.content %>.

我显然遗漏了一些东西，并希望对此提供任何帮助。

我正在使用 ruby​​ 2.7.1、rails 6.0.3.2 和 trix 1.2.3

4

0 回答 0