How to embed an iframe with ActionText/Trix on Ruby on Rails?
I can't find a way to implement the functionality of embeding youtube/vimeo video is actiontext/trix.
This is what I want to achieve:
GIF source: https://github.com/basecamp/trix/issues/206#issuecomment-198479999
I've looked at all the similar questions/solutions, but nothing seems to provide an answer:
- https://github.com/basecamp/trix#inserting-a-content-attachment
- Can't render youtube embed iframe with rails 6 actiontext
- How to display embed video with ActionText
How can we embed an iframe correctly with actiontext/trix using Ruby on Rails?
Solution
I've watched the RailsConf2020 talk on Action Text by Chris Oliver, and here's the step by step answer:
_thumbnail.html.erb
app/views/youtubes/_thumbnail.html.erb
<div>
<%= image_tag youtube.thumbnail_url, style: "max-width:400px" %>
</div>
_youtube.html.erb
app/views/youtubes/_youtube.html.erb
<div>
<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/<%= youtube.id %>" frameborder="0"></iframe>
</div>
application.js
#packs/application.js
import "youtube"
application.rb
config.to_prepare do
ActionText::ContentHelper.allowed_tags << "iframe"
end
routes.rb
resources :youtube, only: :show
youtube.js
#javascript/youtube.js
import Trix from "trix"
import Rails from "@rails/ujs"
let lang = Trix.config.lang;
Trix.config.toolbar = {
getDefaultHTML: function() {
return `
<div class="trix-button-row">
<span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
<button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="${lang.bold}" tabindex="-1">${lang.bold}</button>
<button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="${lang.italic}" tabindex="-1">${lang.italic}</button>
<button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="${lang.strike}" tabindex="-1">${lang.strike}</button>
<button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="${lang.link}" tabindex="-1">${lang.link}</button>
</span>
<span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
<button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-attribute="heading1" title="${lang.heading1}" tabindex="-1">${lang.heading1}</button>
<button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" title="${lang.quote}" tabindex="-1">${lang.quote}</button>
<button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" title="${lang.code}" tabindex="-1">${lang.code}</button>
<button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="${lang.bullets}" tabindex="-1">${lang.bullets}</button>
<button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="${lang.numbers}" tabindex="-1">${lang.numbers}</button>
<button type="button" class="trix-button trix-button--icon trix-button--icon-decrease-nesting-level" data-trix-action="decreaseNestingLevel" title="${lang.outdent}" tabindex="-1">${lang.outdent}</button>
<button type="button" class="trix-button trix-button--icon trix-button--icon-increase-nesting-level" data-trix-action="increaseNestingLevel" title="${lang.indent}" tabindex="-1">${lang.indent}</button>
</span>
<span class="trix-button-group trix-button-group--file-tools" data-trix-button-group="file-tools">
<button type="button" class="trix-button trix-button--icon trix-button--icon-attach" data-trix-action="attachFiles" title="${lang.attachFiles}" tabindex="-1">${lang.attachFiles}</button>
</span>
<span class="trix-button-group-spacer"></span>
<span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
<button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="${lang.undo}" tabindex="-1">${lang.undo}</button>
<button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="${lang.redo}" tabindex="-1">${lang.redo}</button>
</span>
</div>
<div class="trix-dialogs" data-trix-dialogs>
<div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
<div class="trix-dialog__link-fields">
<input type="url" name="href" class="trix-input trix-input--dialog" placeholder="${lang.urlPlaceholder}" aria-label="${lang.url}" required data-trix-input>
<div class="flex">
<input type="button" class="btn btn-secondary btn-small mr-1" value="${lang.link}" data-trix-method="setAttribute">
<input type="button" class="btn btn-tertiary outline btn-small" value="${lang.unlink}" data-trix-method="removeAttribute">
</div>
</div>
<div data-behavior="embed_container">
<div class="link_to_embed link_to_embed--new">
Would you like to embed media from this site?
<input class="btn btn-tertiary outline btn-small ml-3" type="button" data-behavior="embed_url" value="Yes, embed it">
</div>
</div>
</div>
</div>
`
}
}
class EmbedController {
constructor(element) {
this.pattern = /^https:\/\/([^\.]+\.)?youtube\.com\/watch\?v=(.*)/
this.element = element
this.editor = element.editor
this.toolbar = element.toolbarElement
this.hrefElement = this.toolbar.querySelector("[data-trix-input][name='href']")
this.embedContainerElement = this.toolbar.querySelector("[data-behavior='embed_container']")
this.embedElement = this.toolbar.querySelector("[data-behavior='embed_url']")
this.reset()
this.installEventHandlers()
}
installEventHandlers() {
this.hrefElement.addEventListener("input", this.didInput.bind(this))
this.hrefElement.addEventListener("focusin", this.didInput.bind(this))
this.embedElement.addEventListener("click", this.embed.bind(this))
}
didInput(event) {
let value = event.target.value.trim()
let matches = value.match(this.pattern)
console.log(value,matches)
// When patterns are loaded, we can just fetch the embed code
if (matches != null) {
this.fetch(matches[2])
// No embed code, just reset the form
} else {
this.reset()
}
}
fetch(value) {
Rails.ajax({
url: `/youtube/${encodeURIComponent(value)}`,
type: 'get',
error: this.reset.bind(this),
success: this.showEmbed.bind(this)
})
}
embed(event) {
if (this.currentEmbed == null) { return }
let attachment = new Trix.Attachment(this.currentEmbed)
this.editor.insertAttachment(attachment)
this.element.focus()
}
showEmbed(embed) {
this.currentEmbed = embed
this.embedContainerElement.style.display = "block"
}
reset() {
this.embedContainerElement.style.display = "none"
this.currentEmbed = null
}
}
document.addEventListener("trix-initialize", function(event) {
new EmbedController(event.target)
})
youtube.rb
#models/youtube.rb
class Youtube
include ActiveModel::Model
include ActiveModel::Attributes
include GlobalID::Identification
include ActionText::Attachable
attribute :id
def self.find(id)
new(id: id)
end
def thumbnail_url
"http://i3.ytimg.com/vi/#{id}/maxresdefault.jpg"
end
def to_trix_content_attachment_partial_path
"youtubes/thumbnail"
end
end
youtube_controller.rb
#controllers/youtube_controller.rb
class YoutubeController < ApplicationController
def show
@youtube = Youtube.new(id: params[:id])
render json: {
sgid: @youtube.attachable_sgid,
content: render_to_string(partial: "youtubes/thumbnail", locals: { youtube: @youtube }, formats: [:html])
}
end
end
Also available here: https://gist.github.com/yshmarov/90377ba51f14df09df03e6442cd7412e
- RubyMine not showing the project folders with tree structure, it shows the tree structure for the excluded files
- Devise giving admin privileges to destroy
- Best way of transforming values in array of hashes (performance)
- Unit testing paperclip uploads with Rspec (Rails)
- Devise: sign in with two possible encrypted passwords
- Rails—get a random record from db?
- Is there an opposite method of "in?" in Rails?
- BraintreeError: Cannot contact the gateway at this time (during system/integration specs only)
- RoR Graphql Types::BaseObject NameError
- uninitialized constant Rspec
- Error when trying to install app with mysql2 gem
- overriding devise after_sign_up_path_for not working
- Rails route path helpers from inside namespaced controller
- How to set default locale for a controller
- What is the rails way to update a price field before update in a model object generating a total?
- How can I skip before_validations in Rails?
- Reading docs in irb
- ruby on rails link_to delete method not working
- Lost cursor error from MongoDB aggregate statement. Why? Rails 5.2, Mongoid 6.4
- JS file is blocked due to bad MIME in production
- Strange Cookie Overflow error in Ruby on Rails application
- Rails how do I check for existance of a class when not instantiated yet?
- Ruby on Rails Each do method
- How to add raw_filter method to ruby on rails 7?
- How to update STRIPE CHECKOUT SESSION attributes RAILS
- How do I get a list of required fields in a model in Rails?
- In "acts-as-taggable-on", how to get all the tags used in all the instances of a Model?
- Overriding load_and_authorize_resource of super class
- How to print a string in erb file including line breaks
- The Cookie header is not sent with the Fetch GET request to Cloudfront. Why?