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

글쓴이: 최효성

외과전문의,웹프로그래밍,컴퓨터 일러스트레이션 / Surgeon, Medical Illustration, Web Programmer

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

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

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

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

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

  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

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중