동작 시작

TL;DR

Action Text의 GiitHub: https://github.com/rails/actiontextTrix의 GiitHub: https://github.com/basecamp/trixTrix: https://trix-editor.org/

동작

https://weblog.rubyonrails.org/2018/10/3/introducing-action-text-for-rails-6/

2018년 10월 초 발표된 레일스의 새 프레임.Rails 기간 주요 버전의 Rails6에서 가져옵니다.

Action Text를 통해 WYSIWYG를 Rails로 간단히 가져오기br/>
Action Text는 WYSIWYG 편집기 Trix와 이미지 업로드기ActiveStorge를 사용합니다p>

이른바 Trix

https://trix-editor.org/

https://github.com/basecamp/trix/

Trix 자체는 Rails와 전혀 상관없이 WYSIWYG 편집기의 JS 라이브러리입니다br/>
Rails와 관련이 없지만 Rails와 마찬가지로 Basecamp에서 개발하여 사용합니다br/>
창고를 보면 알 수 있듯이 이것은 몇 년 전부터 있었던 창고입니다.

ActionText + ActiveStorage

테스트 동작

새로운 rails new 앱으로 Action Text 테스트br/>
기본적으로 DHH의 Youtube 내용대로 하면 돼요.p>

rails new

가장 주의해야 할 것은 바로 여기다br/>
clone GiitHub의 Master 분기rails new에서 수행합니다.br/>gem install rails로 들어온 rails 버전(현재 5.2.1)이 순조롭지 않습니다.

• GiitHub에서 rails clone
  
  • https://github.com/rails/rails
  
  
• `/railties/exe/rails new blog --edge

rubygems의 rails가 순조롭게 진행되지 않는 것은 웹 패키지와Active Storge 주위의 설정이 없기 때문입니다p>

그 다음은 기본적으로https://github.com/rails/actiontext#installing입니다.

Action Text의 설치

• Gemfile gem "actiontext", github: "rails/actiontext", require: "action_text" gem "image_processing", "~> 1.2"
• rails action_text:install
• rails db:migrate

scaffold+Action Text 가져오기

Postscaffold로 모형을 제작하여ActionText를 그곳에서 사용할 수 있도록 합니다p>

• rails g scaffold post title:string
• rails db:migrate
• 편집 모델app/models/post.rb

class Post < ApplicationRecord
  has_rich_text :content
end

• form의 편집app/views/posts/_form.html.erb

<div class="field">
  <%= form.rich_text_area :content %>
</div>

• 편집 controllerapp/controllers/posts_controller.rb

def post_params
  params.require(:post).permit(:title, :content)
end

• Show 페이지 편집 app/views/posts/show.html.erb

<p>
  <%= @post.content %>
</p>

Sprockets::FileNotFound in Posts#index
Showing /Users/vivid_muimui/project/tmp/actiontext-sample/app/views/layouts/application.html.erb where line #8 raised:

couldn't find file 'trix/dist/trix' with type 'text/css'
Checked in these paths: 
  /Users/vivid_muimui/project/tmp/actiontext-sample/app/assets/config
  /Users/vivid_muimui/project/tmp/actiontext-sample/app/assets/images
  /Users/vivid_muimui/project/tmp/actiontext-sample/app/assets/stylesheets

위 오류가 발생하면 config/initializers/assets.rb에 다음 줄을 추가하고 서버를 다시 시작하십시오.

Rails.application.config.assets.paths << Rails.root.join('node_modules')

sample project

한번 해본 게 있어서 잘 돌아가지 않을 때 참고하세요.

주안점

Action Text, Trix 도입에 있어 논점이 될 수 있는 요점 소개br/>
(실제 공식 환경에서 운용한 적이 없기 때문에 목표를 빠뜨리거나 빗나가게 되면 죄송합니다.)

rails 응용 프로그램이라면 가져오는 방법이 절대적으로 간단하고 빠르다

이미지 업로드 ActiveStorage에 붙여넣기

Post has_one ActionText::RichText
ActionText::RichText has_many ActiveStorageのattachments

이기 때문에, Action Text (Trix) 를 통해 그림을 다른 프로그램 라이브러리에 업로드하는 것은 매우 어렵다.힘들다기보다는 Action Text를 참고로 사용하지 않고 다시 설치하는 게 좋을 것 같아요.p>

이미지 업로드 라이브러리는 아직 결정되지 않았습니다./아직 사용하지 않았다면 ActiveStorage를 사용하는 것이 좋습니다.

WYSIWYG의 기능은 굉장히 기본적이에요.

trix는 터치만 하면 알 수 있지만 아주 기본적인 기능만 설치되어 있습니다br/>
나는 일반인이 투고한 사이트가 충분히 일치할 가능성이 있다고 생각한다.기능이 풍부해도 복잡하게 쓰이지 않는 악작극에 의해 대단해 보이는 기사가 기고되는 등br/>
하지만 CMS나 레드마인 같은 사이트는 기능이 전혀 부족하니 추가 설치가 필요하겠죠p>

스마트폰 이미지가 업로드되지 않은 UI

Basecamp에서 사용하기 때문에 안심이 됩니다.

실제 성적이 있으니 역시 안심이 돼요!

정식 발매되기 전에는 어떻게 될지 모르겠어요.

총결산

WYSIWYG의 기능이 일치하는 응용 프로그램은 매우 편리합니다!