0

我正在尝试使 actiontext blob 触发模式，但它不起作用。

action_storage/blobs/_blob.rb

    <figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
      <% if blob.representable? %>
        <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 500, 500 ] : [ 500, 500 ]) %>
      <% end %>
    
      <figcaption class="attachment__caption">
        <% if caption = blob.try(:caption) %>
          <%= caption %>
        <% end %>
      </figcaption>
    </figure>

My modal

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

我试过像这样包装按钮或标签

<% if blob.representable? %>
    <a href="#exampleModalCenter" data-toggle="modal" data-target="#exampleModalCenter">
        <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 500, 500 ] : [ 500, 500 ]) %>
      </a>
<% end %>

或者

<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 500, 500 ] : [ 500, 500 ]) %>
  </button>

或者

<%= link_to 'Click Here', "#", data: {toggle: "modal", target: "#modal"} do %>
    <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 200, 200 ] : [ 200, 200 ]) %>
  <% end %>

还有更多但没有触发模式

我希望用户能够单击附件并在模式中获得更大的视图。

我的应用程序中有其他模式可以正常工作。我尝试了多种不同的方法，但我得到的最接近的是链接只是刷新了页面。我认为可以通过这个部分使图像触发模态？

有任何想法吗？泰

4

1 回答 1

0

如果您检查浏览器中正在呈现的内容，您会发现您的data-toggle="modal"和data-targethtml 属性没有被呈现。

这是由于模块sanitize_action_text_content内的方法ActionText::ContentHelper不允许 data-toggle 或 data-target html 属性。我在 Rails 项目上留下了一个关于这个的问题。

要呈现 html 属性，您需要将其添加到允许的属性中，例如：

# config/initializers/action_text.rb
ActionText::ContentHelper.allowed_attributes += %w[ data-toggle data-target ]

或者

# config/initializers/action_text.rb
ActionText::Attachment::ATTRIBUTES.push "data-toggle", "data-target"
于 2021-01-29T04:59:10.220 回答