如何使用ActionText显示嵌入式视频

Question

我试图在Wysiwyg Trix和渲染内容中使用Rails 6上的Action Text显示嵌入式视频。但是vaction Text渲染器过滤了所有原始的HTML代码，并迫使我使用JS在渲染内容中显示IFRAME，该内容在Trix中不起作用。

我遵循BaseCamp的Dev之一：https：//github.com/rails/actiontext/sionsues/37#issuecomment-451627370。步骤1至3工作，但是当动作文本呈现我的部分时，它会过滤iframe。

形式创建Wysiywg

= form_for(article, url: url, method: method) do |a|
  = a.label :content
  = a.rich_text_area :content, data: { controller: "articles", target: "articles.field", embeds_path: editorial_publication_embeds_path(@publication, format: :json) }
  = a.submit submit_text, class:"btn full"

刺激控制器添加了嵌入功能(在迫切需要重构(

import { Controller } from "stimulus";
import Trix from "trix";
$.ajaxSetup({
  headers: {
    "X-CSRF-Token": $('meta[name="csrf-token"]').attr("content"),
  },
});
export default class extends Controller {
  static targets = ["field"];
  connect() {
    this.editor = this.fieldTarget.editor; 
    const buttonHTML =
      '<button type="button" class="trix-button" data-trix-attribute="embed" data-trix-action="embed" title="Embed" tabindex="-1">Media</button>';
    const buttonGroup = this.fieldTarget.toolbarElement.querySelector(
      ".trix-button-group--block-tools"
    );
    const dialogHml = `<div class="trix-dialog trix-dialog--link" data-trix-dialog="embed" data-trix-dialog-attribute="embed">
    <div class="trix-dialog__link-fields">
      <input type="text" name="embed" class="trix-input trix-input--dialog" placeholder="Paste your video or sound url" aria-label="embed code" required="" data-trix-input="" disabled="disabled">
      <div class="trix-button-group">
        <input type="button" class="trix-button trix-button--dialog" data-trix-custom="add-embed" value="Add">
      </div>
    </div>
  </div>`;
    const dialogGroup = this.fieldTarget.toolbarElement.querySelector(
      ".trix-dialogs"
    );
    buttonGroup.insertAdjacentHTML("beforeend", buttonHTML);
    dialogGroup.insertAdjacentHTML("beforeend", dialogHml);
    document
      .querySelector('[data-trix-action="embed"]')
      .addEventListener("click", event => {
        const dialog = document.querySelector('[data-trix-dialog="embed"]');
        const embedInput = document.querySelector('[name="embed"]');
        if (event.target.classList.contains("trix-active")) {
          event.target.classList.remove("trix-active");
          dialog.classList.remove("trix-active");
          delete dialog.dataset.trixActive;
          embedInput.setAttribute("disabled", "disabled");
        } else {
          event.target.classList.add("trix-active");
          dialog.classList.add("trix-active");
          dialog.dataset.trixActive = "";
          embedInput.removeAttribute("disabled");
          embedInput.focus();
        }
      });
    document
      .querySelector('[data-trix-custom="add-embed"]')
      .addEventListener("click", event => {
        const content = document.querySelector('[name="embed"]').value;
        if (content) {
          $.ajax({
            method: "POST",
            url: document.querySelector("[data-embeds-path]").dataset
              .embedsPath,
            data: {
              embed: {
                content,
              },
            },
            success: ({ content, sgid }) => {
              const attachment = new Trix.Attachment({
                content,
                sgid,
              });
              this.editor.insertAttachment(attachment);
              this.editor.insertLineBreak();
            },
          });
        }
      });
  }
}

嵌入模型

class Embed < ApplicationRecord
  include ActionText::Attachable
  validates :content, presence: true
  after_validation :fetch_oembed_data
  def to_partial_path
    "editorial/embeds/embed"
  end
  def fetch_oembed_data
    url =
      case content
      when /youtube/
        "https://www.youtube.com/oembed?url=#{content}&format=json"
      when /soundcloud/
        "https://soundcloud.com/oembed?url=#{content}&format=json"
      when /twitter/
        "https://publish.twitter.com/oembed?url=#{content}"
      end
    res = RestClient.get url
    json = JSON.parse(res.body, object_class: OpenStruct)
    self.height = json.height
    self.author_url = json.author_url
    self.thumbnail_url = json.thumbnail_url
    self.width = json.width
    self.author_name = json.author_name
    self.thumbnail_height = json.thumbnail_height
    self.title = json.title
    self.version = json.version
    self.provider_url = json.provider_url
    self.thumbnail_width = json.thumbnail_width
    self.embed_type = json.type
    self.provider_name = json.provider_name
    self.html = json.html
  end
end

创建嵌入的控制器

  def create
    @embed = Embed.create!(params.require(:embed).permit(:content))
    respond_to do |format|
      format.json
    end
  end

响应ajax调用以创建嵌入的

的jbuilder视图

json.extract! @embed, :content
json.sgid @embed.attachable_sgid
json.content render(partial: "editorial/embeds/embed", locals: { embed: @embed }, formats: [:html])

嵌入HTML部分(Slim(

.youtube-embed.embed
  .content
    = image_tag(embed.thumbnail_url) if embed.thumbnail_url.present?
    p = "Embed from #{embed.provider_name} (#{embed.content})"
    p.embed-html = embed.html

最终显示了文章的内容时显示iframe的JS代码

$(document).ready(() => {
  $(".embed").each(function(i, embed) {
    const $embed = $(embed);
    const p = $embed
      .find(".content")
      .replaceWith($embed.find(".embed-html").text());
  });
});

如果我将嵌入的部分更改为

== embed.html

它在Wysiwyg中正确显示，但在渲染视图中不正确。

Answer 1

您需要将iFrame添加到wersy_tags，在 application.rb中添加以下代码：

config.to_prepare do
  ActionText::ContentHelper.allowed_tags << "iframe"
end

Answer 2

看起来您需要白色的脚本生成iframe。

您可以进行的快速测试是在显示页面上添加内容提供商的相关JS(我正在测试Instagram附件，因此添加了<script async src="//www.instagram.com/embed.js"></script>(。

白名单在ActionText视图中所有<script>标签都是不明智的，但是您可以管理脚本加载。

Answer 3

我无法测试您的复杂示例，但是如果您想放置ActionText的HTML，那将是有帮助的。

请尝试：

<%= raw your_action_text_object.to_plain_text %>