Active Admin 에서 Tinymce 에디터 구현하기

Active Admin에서 Tinymce 에디터를 구현하고 이미지 업로드 기능까지 완벽하게 설정하는 방법을 자세히 안내해 드립니다.

어드민에서 wysiwyg editor 를 삽입하는 것은 간단하게 구현할 수 있습니다.

먼저 젬을 설치해 줍니다

gem 'tinymce-rails' 
gem 'tinymce-rails-imageupload', '~> 4.0.0.beta'

bundle 도 진행 해줍니다

bundle install

이후에 active_admin.js 에 아래와 같이 코드를 추가해줍니다.

//= require tinymce

TinyMCERails.configuration.default = {
  selector: "textarea.tinymce",
  toolbar: ["styleselect | bold italic | undo redo","link | uploadimage"],
  plugins: "link,uploadimage"
};

TinyMCERails.initialize('default', {
  relative_urls : false,             /// 어드민 페이지에서 가끔 발생하는
  remove_script_host : false,        /// 상대 url을 해결해주는
  convert_urls : true,               /// 코드입니다
});

이후에 어드민쪽 페이지에 아래처럼 코드를 추가해줍니다.

f.input :content, input_html: {class: "tinymce"}

이렇게 하면 tinymce 에디터를 띄우는 것에 성공하실 수 있을 겁니다.

하지만 이 상태에서는 이미지 업로드 기능이 정상적으로 작동하지 않을 겁니다.

일단 해당 처리를 해줄 컨트롤러를 만들어줍니다.

rails g controller tinymce_assets

이후에 컨트롤러에서 create액션을 사용할 주소를 만들어줍니다.

post '/tinymce_assets' => 'tinymce_assets#create'

이후에는 tinymce_assets controller 에서

class TinymceAssetsController < ApplicationController
  def create
    file = params[:file]
    uploader = UserImageUploader.new #업로더라는 이름으로 좀업로더 객체 생성

    uploader.store!(file)
    render json: {
      image: {
        url: uploader.url
      }
    }, content_type: "text/html"
  end
end

이렇게 하면 이미지를 json 타입으로 에디터에 보내주고 처리해서 바로 띄울 수 있어야 하는데 한가지 오류가 뜰 것 입니다.

model 의 id가 없다는 오류일텐데요 이부분은 uploader 파일에 들어가서 기존의

def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end

부분의 model.id 부분을 지워주면 됩니다.

def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}"
end

이것도 읽어보세요