WYSIWYG Editor with Summernote

#27 WYSIWYG Editor with Summernote
5/2/2016

Summary

Integrate Summernote WYSIWYG Editor into your application. Learn how to use AJAX callbacks to filestore your images instead of database Base64.
6
rails wysiwyg view ajax javascript 7:40 min

Summary

Gemfilegem 'summernote-rails'
gem "refile", require: "refile/rails"
gem "refile-mini_magick"

Generate a new model for your images to be stored. Without Refile (or a similar uploader), the images will be converted to BASE64 and stored within the database.

bashrails g model image image_id image_filename image_size:integer image_content_type
application.js//= require summernote
application.css.scss/*
@import "bootstrap-sprockets";
@import "bootstrap";
*/

@import "summernote";
_form.html.erb    
    <%= f.input :summary, as: :summernote %>
    <%= f.input :content, as: :summernote %>


articles.coffee$ ->
  sendFile = (that, file) ->
    data = new FormData
    data.append 'image[image]', file
    $.ajax
      data: data
      type: 'POST'
      url: '/images'
      cache: false
      contentType: false
      processData: false
      success: (data) ->
        img = document.createElement('IMG')
        img.src = data.url
        img.setAttribute('id', data.image_id)
        $(that).summernote 'insertNode', img

  deleteFile = (file_id) ->
    $.ajax
      type: 'DELETE'
      url: "/images/#{file_id}"
      cache: false
      contentType: false
      processData: false

  ready = ->
    $('[data-provider="summernote"]').each ->
      $(this).summernote 
        height: 200
        callbacks: 
          onImageUpload: (files) ->
            img = sendFile(this, files[0])
          onMediaDelete: (target, editor, editable) ->
            image_id = target[0].id
            if !!image_id
              deleteFile image_id
            target.remove()
  $(document).ready(ready)
  $(document).on('page:load', ready)
images_controller.rbclass ImagesController < ApplicationController
  protect_from_forgery except: :create
 
  def create
    @image = Image.new(image_params)
    @image.save
 
    respond_to do |format|
      format.json { render :json => { url: Refile.attachment_url(@image, :image), image_id: @image.image_id } }
    end
  end
 
  def destroy
    @image = Image.find_by(image_id: params[:id])
    @image.destroy
    respond_to do |format|
      format.json { render :json => { status: :ok } }
    end
  end
  
  private
 
  def image_params
    params.require(:image).permit(:image)
  end
end
routes.rbRails.application.routes.draw do
  resources :articles
  resources :images, only: [:create, :destroy]
  root to: 'articles#index'
end


3416976?v=3&s=64
zulhfreelancer said about 1 year ago:

Really awesome video. Thanks!

9312729?v=3&s=64
CarlSosaDev said 12 months ago:

Thanks very much  for the video!

635114?v=3&s=64
kobaltz said 12 months ago:

Thank you for watching

4756285?v=3&s=64
adrianvalenz said 5 months ago:

Hi there! I just messaged you on Twitter. I actually have a question for Summernote as well. Whenever I save/publish a post that contains an iframe of a youtube video, it redirects me to the show page but it is blank and I have to update it. Have you  tried or noticed that? My customers will want to embed Youtube videos since they are Youtubers and I don't know what to do.

Thank you in advance for your time.

635114?v=3&s=64
kobaltz said 5 months ago:

Are you entering the iframe code in the "code view", using the Video button or are you pasting it into the WYSIWYG editor? 

Also, can you share the snippet that you're using to display the content of the editor? For example, do you have a <%= raw @model.content %> or something similar?

272344?v=3&s=64
nikkos said 3 months ago:

I have Rails 5 and turbolinks 5. The summernote plugin worked but I had a problem. When I was trying to edit the post, the summernote editor disappear. To fix this I changed one line on coffeescript code:

$(document).on('pages:load', ready)

to

$(document).on('turbolinks:load', ready)

Login to Comment