Question

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

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

当它在“显示”视图中呈现时，我确认我的自定义版本在数据库中仍然存在。

我认为这是一个清洁问题。我以前在演出中遇到了这个问题，所以我将样式属性添加到了Rails消毒剂允许的属性中。

我的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 %>

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

Answer 1

使用rgb格式：

Trix.config.textAttributes.color = {
  style: { color: 'rgb(255, 0, 0)' },
  parser: (element) => element.style.color === 'rgb(255, 0, 0)',
  inheritable: true
}

如何在编辑时（Ruby on Rails，Actiontext）在WYSIWYG Trix Editor中保留自定义选项

1 个答案: