1

我正在使用 Trix 和 actiontext 创建一个所见即所得的 Rails 网站。我正在使用 Ruby 2.6.3 和 Rails 5.2.3。

问题：当我实现自定义版本（即添加红色文本）时，它在创建时完美运行（CRUD：新），在渲染时完美显示（CRUD：显示），但是当我尝试编辑文本时，我的自定义样式未显示在我的编辑器中的编辑视图中，并且 trix 添加到富文本的跨度不存在于客户端 DOM 中（CRUD：编辑）。

当它呈现在 Show 视图中时，我确认我的自定义版本保留在数据库中。

我想这是一个消毒问题。我之前在节目中遇到过这个问题，所以我将 style 属性添加到 Rails sanitizer allowed 属性中。

我的 trix 定制器看起来像这样添加一个红色选项：

// Attributes definition :
Trix.config.textAttributes.red = { 
    style: { color: "red" },
  parser: function(element) {
    return element.style.color === "red"
  },
  inheritable: true
 }

addEventListener("trix-initialize", function(event) {  
  var buttonHTML = '<button type="button" data-trix-attribute="red">RED</button>'


    event.target.toolbarElement.
    querySelector(".trix-button-group.trix-button-group--text-tools").
        insertAdjacentHTML("beforeend", buttonHTML)
})

在编辑器中使用时效果很好（工具栏中的选项在编辑和新视图中都可以使用）。

此外，为了在显示视图中正确显示，我添加了一个 Rails 初始化程序以允许样式属性：

Rails::Html::Sanitizer.white_list_sanitizer.allowed_attributes.add 'style'

问题是，当我进入编辑视图时，之前应用的红色样式不再呈现。请注意，我对创建和编辑视图使用完全相同的 _form.html.erb ：

<%= simple_form_for([@owner, @article] , url: @action[:url], method: @action[:method]) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :title %>
    <%= f.rich_text_area :content %>
  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

如果您需要更多详细信息，请不要犹豫。非常感谢您的帮助 ！

4

1 回答 1

1

使用 rgb 格式：

Trix.config.textAttributes.color = {
  style: { color: 'rgb(255, 0, 0)' },
  parser: (element) => element.style.color === 'rgb(255, 0, 0)',
  inheritable: true
}
于 2020-01-24T14:57:03.380 回答