Wysiwig on RailsRoppongi.rb#1 @__timakin__ / timakin

Hello!

• timakin / @__timakin__

• Ruby / Node / Go

• https://medium.com/@timakin

• tech-savvy.hatenablog.com

Wysiwig

Wysiwig

•

•

•

•

Wysiwyg

•

•

•

• edit / view

Wysiwig on Rails

Wysiwyg Rails

• CKE Editor

• Squire

• Froala Editor

• Bootsy

• Redactor

• Medium-Editor

CKE Editor

CKE Editor

•

• WordPress

• Rails Carrierwave/PaperClip

• Plugin Rails config

•

Squire

Squire

•

•

•

textarea

iframe

Froala Editor

Froala Editor

•

•

• S3 ( or Froala

Storage )

• input

Bootsy

Bootsy

• Rails i18n

• Squire

• Carrierwave bootstrap-wysihtml5

Redactor

Redactor

•

• Video insert (Embed tag ) / Table

view / File upload

•

Medium-Editor

Medium-Editor

• Medium

•

• edit

Wysiwyg Rails

• CKE Editor

• Squire

• Froala Editor

• Bootsy

• Redactor

• Medium-Editor

Wysiwyg Rails

• CKE Editor

• Squire

• Froala Editor

• Bootsy

• Redactor

• Medium-Editor

Wysiwyg Rails

• CKE Editor

• Squire

• Froala Editor

• Bootsy

• Redactor

• Medium-Editor

Dante-Editor

Dante-Editor

• Medium-Editor Medium

• Image upload, video, social embed /

• iframe

url embedly

• S3 API js

• div value form hidden_field

• gem

image upload

class ApiController < ApplicationController protect_from_forgery with: :null_session

def upload_image s3 = Aws::S3::Resource.new(region: ENV['AWS_REGION'], access_key_id: ENV['AWS_ACCESS_KEY_ID'], secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'])

case Rails.env when 'production' obj = s3.bucket(ENV['SACKET_FOG_PRODUCTION_DIRECTORY']).object("images/embedded/#{SecureRandom.hex(8)}") when 'staging' obj = s3.bucket(ENV['SACKET_FOG_STAGING_DIRECTORY']).object("images/embedded/#{SecureRandom.hex(8)}") when 'development' obj = s3.bucket(ENV['SACKET_FOG_STAGING_DIRECTORY']).object("images/embedded/#{SecureRandom.hex(8)}") end

obj.upload_file(params[:file].tempfile, acl: 'public-read')

render json: { status: :ok, data: obj.public_url } endend

form

editor = new Dante.Editor( { el: "#editor", disable_title: true, upload_url: "/api/upload_image", base_widgets: ["uploader", "embed"], oembed_url: "http://api.embed.ly/1/oembed?key=hogehoge" });editor.start()

$(document).ready(function(){ $("#editor").bind("input properchange", function(){ $("#text_" + $(this).attr("data-field-id")).val($(this).html()) });});

# var embedTemplate = function() { return "<figure contenteditable='false' class='graf--figure graf--iframe graf--first' name='504e' tabindex='0'> <div class='iframeContainer'> <iframe frameborder='0' width='700' height='393' data-media-id='' src='' data-height='480' data-width='854'> </iframe> </div> <figcaption contenteditable='true' data-default-value='Type caption for embed (optional)' class='imageCaption'> <a rel='nofollow' class='markup--anchor markup--figure-anchor' data-href='' href='' target='_blank'> </a> </figcaption> </figure>";};

var oembed_url = "http://api.embed.ly/1/oembed?key=c6fc4f62de674f8a8ee60a7cbea1e13d&url=";

$(function(){ var node = $(".is-embedable"); var node_name = node.attr('name');

if (node.text()) { console.log(node.text()); return $.getJSON("" + oembed_url + (node.text())).success((function(_this) { return function(data) { var iframe_src, replaced_node, tmpl, url; var node = $("[name=" + node_name + "]"); node.hide(); iframe_src = $(data.html).prop("src"); tmpl = $(embedTemplate()); tmpl.attr("name", node.attr("name")); $(node).replaceWith(tmpl); replaced_node = $(".graf--iframe[name=" + (node.attr("name")) + "]"); replaced_node.find("iframe").attr("src", iframe_src); url = data.url || data.author_url; replaced_node.find(".markup--anchor").attr("href", url).text(url); }; })(this)).error((function(_this) { return function(res) { console.log(res); }; })(this)); }});

•

Dante-Editor

• Rails gem

Carrierwave

js