Action Text란?

Rails6에서 도입된 새로운 기능으로, 리치 텍스트라고 불리는 모던한 에디터 기능을 사용할 수 있다.


이번은 이 Action Text의 도입 방법의 메모입니다.

구현

① 도입

imagemagick 는 이미지 변환을 위한 도구입니다.
Action Text는 에디터내에서 화상의 삽입을 할 수 있으므로 필요.

터미널

$ brew install imagemagick

Gemfile의 다음 부분의 주석 처리를 제거하고 bundle install
Gemfile

gem 'image_processing', '~> 1.2'

터미널에 다음을 각각 추가.

터미널

$ bundle exec rails action_text:install

터미널

$ bundle exec rails webpacker:install

여기까지 할 수 있으면 다음과 같은 migration 파일이 추가되어 있는 것을 확인해, migration을 실행.

db/migrate/20210622011818_create_action_text_tables.action_text.rb

class CreateActionTextTables < ActiveRecord::Migration[6.0]
  def change
    create_table :action_text_rich_texts do |t|
      t.string     :name, null: false
      t.text       :body, size: :long
      t.references :record, null: false, polymorphic: true, index: false

      t.timestamps

      t.index %i[record_type record_id name], name: 'index_action_text_rich_texts_uniqueness', unique: true
    end
  end
end

터미널

$ rails db:migrate

이것으로 도입 완료.

② 컬럼 삭제

Action Text를 사용하고 싶은 모델 부분에 다음을 추가.
이번은 Event model로 합니다.
content 의 부분은 Action Text로 사용하고 싶은 컬럼명이므로 자신의 컬럼에 맞추어 주세요.
이번은 content 라고 합니다.

app/models/event.rb

has_rich_text :content

그건 그렇고,content 컬럼을 준비하고 있는 경우 Action Text에서는 독자적인 migration 파일에 입력한 값을 저장하여 content 컬럼 부분은 불필요하게 됩니다.
그래서 content 컬럼을 지워 둡시다.

컬럼을 지우는 방법은 터미널에서 컬럼 삭제용의 파일을 작성해,

터미널

$ rails g migration RemoveContentFromEvents

remove_column 에서 삭제합니다.remove_column 를 사용할 때는 마지막으로 데이터형의 지정을 잊지 않고! ( text 부분)

db/migrate/20210622012137_remove_content_from_events.rb

class RemoveContentFromEvents < ActiveRecord::Migration[6.1]
  def change
    remove_column :events, :content, :text
  end
end

③ 반영

그럼 마지막으로 Action Text를 사용할 수 있도록 반영합시다!
app/assets/stylesheets/actiontext.scss 가 추가되었으므로 application.scss에 추가.trix-editor 라는 것도 추가해 CSS를 맞춥니다.

app/assets/stylesheets/application.scss

@import 'actiontext';
@import 'trix/dist/trix.css';


trix-editor {
  min-height: 20em;
  max-height: 20em;
  overflow-y: auto;
}

마지막으로 Action Text로 하고 싶은 부분의 views를 rich_text_area 로 하는 것으로 반영됩니다!

app/views/events/_form.html.haml

 = f.rich_text_area  :text, class: 'form-control'

이것으로 완성!

덤

Action Text의 내용을 검색하고 싶은 경우는 아래의 기사를 참고해 보세요!