Bootstrap용 WYSIWYG 웹에디터 Summernote 사용시 서버로 로컬 이미지 업로드후 삽입하기 (2)

최근에 summernote0.7.1 버전으로 업그레이드되면서 summernote-rails 젬도 0.7.1.0 버전으로 업데이트되었다.

예전에 Bootstrap용 WYSIWYG 웹에디터 Summernote 사용시 서버로 로컬 이미지 업로드후 삽입하기 (1)라는 제목의 글을 블로그에 올린 바 있다.

이 글에서는 summernote-rails 젬이 0.7.1.0으로 버전업되면서 기능추가 및 업데이트가 있어서 이전 글에서 업데이트된 내용을 소개한다.

1. 프로젝트 작성 환경

  • 루비 2.3.0
  • 레일스 4.2.5

2. 샘플 프로젝트의 생성

$ rails new blog 

3. Gemfile에 추가할 젬

gem 'bootstrap-sass' 
gem 'font-awesome-rails' 
gem 'simple_form' 
gem 'summernote-rails', '0.7.1.0' 
gem 'codemirror-rails' 
gem 'paperclip' 

4. 셋팅

simple_form 설치

$ rails g simple_form:install --bootstrap 

app/assets/javascripts/application.js

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require codemirror 
//= require codemirror/modes/ruby 
//= require summernote 
//= require summernote/locales/ko-KR 
//= require turbolinks 
//= require_tree . 

app/assets/stylesheets/application.scss

@import "bootstrap"; 
@import "font-awesome"; 
@import "codemirror"; 
@import "summernote"; 
@import "codemirror/themes/solarized"; 

app/assets/javascripts/summernote_upload.coffee

sendFile = (file, toSummernote) ->
  data = new FormData
  data.append 'upload[image]', file
  $.ajax
    data: data
    type: 'POST'
    url: '/uploads'
    cache: false
    contentType: false
    processData: false
    success: (data) ->
      console.log 'file uploading...'
      toSummernote.summernote "insertImage", data.url

$(document).on 'page:change', (event) ->
  $('[data-provider="summernote"]').each ->
    $(this).summernote
      lang: 'ko-KR'
      height: 500
      codemirror:
        lineWrapping: true
        lineNumbers: true
        tabSize: 2
        theme: 'solarized'
      callbacks:
        onImageUpload: (files) ->
          sendFile files[0], $(this)
  return

주의 : 15번 코드라인은 폼이 터보링크로 연결되어 브라우저에 나타날 때 documentpage:change 이벤트에서 summernote 에디터가 제대로 동작하도록 변경한 것이다.

app/views/posts/_form.html.erb

<%= simple_form_for(@post) do |f| %> 
  <%= f.error_notification %> 
  <div class="form-inputs"> 
    <%= f.input :title %> 
    <%= f.input :content, as: :summernote %>
  </div> 
  <div class="form-actions"> 
    <%= f.button :submit %>
  </div> 
<% end %>

Demo Source : https://github.com/luciuschoi/summernote071

9 Comments

  1. 안녕하세요 먼저 좋은포스트 정말 감사드립니다. 몇가지 궁금한점이 있어 글 남깁니다. 우선 s3를 이용해서 이미지를 업로드하게 되면 이미지는 제 로컬에 아예 남지 않고 s3로 넘어가게 되는건가요?? 1편 영상에서는 그냥 로컬파일로 저장이 되는것 같더라구요..

    1. 그렇습니다. 따라서 대개 개발(development mode)시에는 로컬로 저장하고 배포환경(production mode)에서는 AWS S3로 업로드되도록 구성합니다. config/initializers/carrierwave.rb 파일에 업로드를 위한 셋팅을 작성하면 됩니다. 여기를 참고하시면 도움이 될 것 같습니다.

      1. 답변주셔서 감사드립니다! 서비스에 빠르게 적용시켜보도록하겠습니다.

      2. 예전에 websockets을 이용한 레일스 프로젝트 개발에 관심을 보이시던 기억이 나는데요. 레일스 5에서 ActionCable 로 쉽게 사용할 수 있게 되었다는 것 알고 계시죠? ^^

      3. 아마 다른분과 헷갈리신듯 합니다! 하지만 저도 레일즈를 이용한 개발에는 많은 관심이 있습니다!

  2. Hi..Hey thank you so much for this post, I implemented in my project and it works fine, I am new with RoR and I am triying to implement the OnMediaDelete but I am having troubles could you please help me with this? I will appreciate it..gretting from Bogota-Colombia

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.