Ruby on Rails : 게시판 텍스트 편집기 [Gem : TinyMCE]

해당 글은 https://blog.naver.com/kbs4674/221012826088 로 부터 게시글이 이전되었습니다.

 

게시판 텍스트 편집기 (TinyMCE)

게시글에서 저희가 글을 쓸 때 밋밋하게 글자만 작성하지 않고, 막 '가운데 정렬, 하이퍼링크, 글자색 지정, 글꼴 지정, 글자 크기 지정, 테이블(표) 생성, ...' 등등 다양한 기능을 사용해가며 글을 쓰는경우 많고, 그런 경험 매번 해보셨을겁니다.

 

네이버 텍스트 편집기 (네이버에서는 저걸 '스마트 에디터' 라고 부릅니다.)

이 기능도 게시판 기능에 있어 중요할 거라는 것을 제가 전 글에 언급하기도 했는데요, 이번 시간에는 Ruby에서 게시글 에디터 편집기를 도입하는법을 알아보겠습니다.

 

 참고 

1. 현재 이 블로그의 TinyMCE 예시본에서는 사진 업로드가 되어있는데, TinyMCE가 사진 업로드를 제공하긴 합니다만, 이번 글에서는 TinyMCE의 사진 업로드 기능에 대해서는 다루지 않습니다.

사진 업로드 기능을 넣고 싶으시다면, TinyMCE 를 적용 후, 이 글[클릭]을 참고해주세요.

 

글을 작성하기 전에 앞서, 저는 여러분들의 게시판 글 작성 상태가 위처럼 내용 입력란에 편집기가 없는 상태라는걸 가정하고 쓰겠습니다.

 

 

• 게시판 텍스트 편집기

 참고 

 1. Scaffold CRUD를 기준으로 설명합니다.

 

1,  Gemfile  파일로 가셔서 맨 아랫줄에 다음을 입력합니다.

gem 'tinymce-rails'

그리고 터미널에 아래 명령어를 입력합니다.

bundle install

 

2. 이미 서버가 켜져있다면 서버를 껏다 킵니다. (정의된 Gem 적용)

 

3.  config 디렉토리(폴더)  내에  tinymce.yml  파일을 만듭니다.

 

 

그리고  config/tinymce.yml  에 아래 내용을 작성합니다.

toolbar: undo redo | forecolor | bold italic | alignleft aligncenter alignright | fontselect | code | link | uploadimage | table |
plugins:
  - link
  - uploadimage
  - textcolor
  - code
  - table

 참고   config/tinymce.yml  에 작성되는 내용은 에디터 편집기에 들어갈 기능을 설정하는겁니다.

 참고 2  그 외 기능들 (아래 목록 외에도 더 있으며, 더 많은 기능은 여기를 참고해주세요.)

 

 

4.  app/assets/javascripts  디렉토리(폴더) 내에 있는  applications.js  파일을 열람하셔서 다음을 작성합니다.

(Tinymce에 대한 Javascript 정의)

//= require tinymce
//= require tinymce-jquery

 

5. CRUD 중, 게시판 글 작성 폼을 담당하는  _form.html.erb  로 가서 내용 작성란을 다음과 같이 수정합니다.

(변경 전)

<div class="field">
    <%= form.label :내용 %>
    <%= form.text_area :content, id: :post_content %>
</div>

 

(변경 후)

<div class="field">
    <%= form.label :내용 %>
    <%= tinymce :language => "en" %>
    <%= form.text_area :content, id: :post_content, class: "form-control tinymce", rows: "10" %>
</div>

 

6. 5번 과정까지 다 작성하고, 에디터 편집기를 통해 글꼴설정, 글자크기 설정 등을 막 하고, 글을 작성하면

HTML 태그가 적용이 되어있지 않습니다 -.-..

 

텍스트 편집기에서 글자크기, 가운데정렬을 해줬음에도 작성된 게시글을 보면 적용이 정상적으로 안되어있음.

작성된 내용을 보여줄 때, HTML 태그 적용을 위해 게시글을 보여주는 것을 담당하는  show.html.erb  로 가서 다음과 같이 수정합니다.

(변경 전)

## show.html.erb 내에서 '게시물 내용'을 보여주는 변수

<%= @post.content %>

 

(변경 후)

#show.html.erb 내에서 '게시물 내용'을 보여주는 변수 뒤에 .html_safe를 작성.

<%= @post.content.html_safe %>

 

위 작업을 마치면 이제 정상적으로 HTML태그가 적용된 채로, 게시글이 보여질 겁니다!

이제 태그가 정상적으로 적용되어서 보이는 게시물

 

 

•  이슈 : C9에서는 Tinymce가 잘 되는데, 헤로쿠에서 안보인다면?

 app/views/layouts/application.html.erb  에서  <%= yield %>  바로 윗 줄에 다음 코드를 입력해보세요.

<%= tinymce_assets %>

 

 참고  2019년 8월 15일 기준으로, 다시 재 확인해본 결과 해당 코드가 있으면 오히려 TinyMCE가 안보이던 문제가 확인되었습니다.

더군다나 해당 코드가 없어도 헤로쿠에서도 TinyMCE가 잘 보였습니다.

혹시 몰라서 해당 이슈 기록에 대해선 그대로 냅두겠습니다.

 

 

• i18n : TinyMCE 번역

 참고  TinyMCE 번역을 적용 시, '이미지 업로드' 기능이 있으면 일단 번역은 되나,

 (조금 걸리적 거릴 정도로) 오류메세지가 나오니 이 점 참고바랍니다.

 

TinyMCE는 i18n 번역 서비스를 제공하고 있습니다.

적용 방법은 간단합니다.

 

1.  Gemfile  을 열고, Gemfile 파일 내용에 다음 내용을 추가합니다.

gem 'tinymce-rails-langs', '~> 4.2'

 

2. 터미널 명령어에서

bundle install

을 입력해서 Gem을 설치해주세요.

 

3. '게시판 텍스트 편집기 - 5)' 과정에서 했던 것 중,

## app/views/posts/_form.html.erb

<%= tinymce :language => "en" %>

이 부분을 다음과 같이 수정해줍니다.

## app/views/posts/_form.html.erb

<%= tinymce :language => "ko" %>

 

4. TinyMCE의 한글 적용 완성입니다!

 

 

• 자료 참고

1. Yotube 설명 [클릭]

2. Github Gem Document [클릭]

3. TinyMCE 공식 페이지 [클릭]

4. Tinymce Heroku에서 안되는 문제 [클릭]

5. i18n Gem Document [클릭]

 

루비온 레일즈 Ruby on Rails ROR