Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Wysiwig on Rails
Similar to Wysiwig on Rails (20)
Recently uploaded
Recently uploaded (20)
Wysiwig on Rails
- 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
- 6. Wysiwyg • • • • edit / view
- 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
- 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
- 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)); } });