Wysiwig on Rails @Roppongi.rb#1のLT資料です。

1. Wysiwig on Rails
Roppongi.rb#1
@__timakin__ / timakin

2. Hello!
• timakin / @__timakin__
• Ruby / Node / Go
• https://medium.com/@timakin
• tech-savvy.hatenablog.com

3. Wysiwig

5. Wysiwig
•
•
•
•

6. Wysiwyg
•
•
•
• edit / view

7. Wysiwig on Rails

8. Wysiwyg Rails
• CKE Editor
• Squire
• Froala Editor
• Bootsy
• Redactor
• Medium-Editor

9. CKE Editor

10. CKE Editor
•
• WordPress
• Rails Carrierwave/PaperClip
• Plugin Rails config
•

11. Squire

12. Squire
•
•
•
textarea
iframe

13. Froala Editor

14. Froala Editor
•
•
• S3 ( or Froala
Storage )
• input

15. Bootsy

16. Bootsy
• Rails i18n
• Squire
• Carrierwave bootstrap-wysihtml5

17. Redactor

18. Redactor
•
• Video insert (Embed tag ) / Table
view / File upload
•

19. Medium-Editor

20. Medium-Editor
• Medium
•
• edit

21. Wysiwyg Rails
• CKE Editor
• Squire
• Froala Editor
• Bootsy
• Redactor
• Medium-Editor

22. Wysiwyg Rails
• CKE Editor
• Squire
• Froala Editor
• Bootsy
• Redactor
• Medium-Editor

23. Wysiwyg Rails
• CKE Editor
• Squire
• Froala Editor
• Bootsy
• Redactor
• Medium-Editor

24. Dante-Editor

25. Dante-Editor
• Medium-Editor Medium
• Image upload, video, social embed /
• iframe
url embedly
• S3 API js
• div value form hidden_field
• gem

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));
}
});

30. •
Dante-Editor
• Rails gem
Carrierwave
js