如何使用 ActionText 显示嵌入视频

Question

我正在尝试在 Rails 6 上使用 ActionText 在 WYSIWYG Trix 和渲染内容中显示嵌入式视频。但是 ActionText 渲染器会过滤所有原始 html 代码并强制我使用 JS 来显示渲染内容中的 iframe，这在 Trix 中不起作用。

我按照 Basecamp 的开发人员之一给出的说明进行操作：https : //github.com/rails/actiontext/issues/37#issuecomment-451627370。第 1 步到第 3 步有效，但是当 ActionText 呈现我的部分时，它会过滤 iframe。

创建所见即所得的表格

= 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"

添加嵌入功能的 Stimulus 控制器（急需重构）

= 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

响应 ajax 调用以创建 Embed 的 jbuilder 视图

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

Embed 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 代码

json.extract! @embed, :content

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

如果我将 Embed 部分更改为

== embed.html

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

Answer 1

看来您需要将生成 iframe 的脚本列入白名单。

您可以做的一个快速测试是在显示页面上为内容提供者添加相关的JS（我正在测试Instagram附件，所以添加了<script async src="//www.instagram.com/embed.js"></script>）。

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