利用スタック

• ActionText
• ruby-oemned (Gem)
  • APIについてはこのGemからOEmbedのAPIリクエストをしています。
  • https://github.com/ruby-oembed/ruby-oembed

OEｍbedを使ってのHTML埋め込み対応

モデルにActiontext::Attachableをincludeする

class ActionText::Oembed < ApplicationRecord

  include ActionText::Attachable

  validates :url, presence: true
  validates :raw_info, presence: true

  def html
    raw_info['fields']["html"]
  end
  
  # raw_infoカラムにJSONのレスポンス内容が保持されている。
  def raw_info
    begin
      JSON.parse(read_attribute(:raw_info))
    rescue => e
      {}
    end
  end
end

OEmbedのコンテンツを取得して作成するWebAPI

class OembedController < ApplicationController
  def create
   begin
      response = OEmbed::Providers.get(params[:url])
    rescue OEmbed::NotFound
      head 422 and return  
    end

    if @oembed = ActionText::Oembed.create(url: params[:url], raw_info: response.to_json)
      render :show, status: 201
    else 
      render json: @oembed.errors, status: 422
    end
  end
 end

WebAPIレスポンスにモデルのsgidが必要

# app/views/oembed/show.json.jbuilder
json.url @oembed.url
json.html @oembed.html
json.sgid @oembed.attachable_sgid
json.raw_info @oembed.raw_info

Trix.AttachmentをWebAPIのレスポンスをもとに挿入する。

import Trix from "trix"
import axios from "axios"

document.addEventListener("turbolinks:load", () => {
  if (document.getElementById("blog_content")) {
    // initEmbbedLink()
    const button = document.getElementById("LinkCardButton")
    button.addEventListener("click", e => {
      e.preventDefault
      insertLinkcard()
    })
  }
});

function insertLinkcard() {
  const url = prompt("please inser url Oembed");
  if (url) {
    fetchEmbbedLink(url);
  }
}

function insertAttachment (data) {
  const trixElement = document.getElementById("blog_content");
  const editor = trixElement.editor

  const attachment = new Trix.Attachment({
    content: data.html,
    sgid: data.sgid
  });

  editor.insertAttachment(attachment)
}

function fetchEmbbedLink(url) {
  axios.get(`/oembed.json?url=${url}`)
    .then(response => {
      insertAttachment(response.data)
    }).catch(error => {
      console.error(error)
    });
}

埋め込み用のErbテンプレートを作成

# app/views/action_text/oembeds/_oembed.html.erb
<%== oembed.html %>

落穂拾い

# config/initializers/html_sanitation.rb

Rails::Html::WhiteListSanitizer.allowed_tags << "iframe"
Rails::Html::WhiteListSanitizer.allowed_tags << "script"

まとめ