Weitere ähnliche Inhalte
Ähnlich wie Wysiwig on Rails (20)
Kürzlich hochgeladen (20)
Wysiwig on Rails
- 2. Hello!
• timakin / @__timakin__
• Ruby / Node / Go
• https://medium.com/@timakin
• tech-savvy.hatenablog.com
- 26. 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 }
end
end
- 27. 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())
});
});
- 28. #
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=";
- 29. $(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));
}
});