공식 웹사이트 rubyonrails.org: 루비온레일스 웹사이트

Action Text Overview

This guide provides you with all you need to get started in handling rich text content.

After reading this guide, you will know:

1 Introduction

Action Text brings rich text content and editing to Rails. It includes the Trix editor that handles everything from formatting to links to quotes to lists to embedded images and galleries. The rich text content generated by the Trix editor is saved in its own RichText model that's associated with any existing Active Record model in the application. Any embedded images (or other attachments) are automatically stored using Active Storage and associated with the included RichText model.

2 Trix compared to other rich text editors

Most WYSIWYG editors are wrappers around HTML’s contenteditable and execCommand APIs, designed by Microsoft to support live editing of web pages in Internet Explorer 5.5, and eventually reverse-engineered and copied by other browsers.

Because these APIs were never fully specified or documented, and because WYSIWYG HTML editors are enormous in scope, each browser's implementation has its own set of bugs and quirks, and JavaScript developers are left to resolve the inconsistencies.

Trix sidesteps these inconsistencies by treating contenteditable as an I/O device: when input makes its way to the editor, Trix converts that input into an editing operation on its internal document model, then re-renders that document back into the editor. This gives Trix complete control over what happens after every keystroke, and avoids the need to use execCommand at all.

3 Installation

Run rails action_text:install to add the Yarn package and copy over the necessary migration.

4 Examples

Adding a rich text field to an existing model:

# app/models/message.rb
class Message < ApplicationRecord
  has_rich_text :content
end

Then refer to this field in the form for the model:

<%# app/views/messages/_form.html.erb %>
<%= form_with(model: message) do |form| %>
  <div class="field">
    <%= form.label :content %>
    <%= form.rich_text_area :content %>
  </div>
<% end %>

And finally display the sanitized rich text on a page:

<%= @message.content %>

To accept the rich text content, all you have to do is permit the referenced attribute:

class MessagesController < ApplicationController
  def create
    message = Message.create! params.require(:message).permit(:title, :content)
    redirect_to message
  end
end

5 Custom styling

By default, the Action Text editor and content is styled by the Trix defaults. If you want to change these defaults, you'll want to remove the app/assets/stylesheets/actiontext.scss linker and base your stylings on the contents of that file.

You can also style the HTML used for embedded images and other attachments (known as blobs). On installation, Action Text will copy over a partial to app/views/active_storage/blobs/_blob.html.erb, which you can specialize.

피드백

이 가이드의 품질을 향상시키기 위해 여러분의 도움이 필요하다.

오타나 실제 오류를 발견시 여러분의 기여를 권고한다. 시작하려면 본 가이드의 기여 섹션을 읽어보기 바란다.

미완성된 컨텐츠나 업데이트되지 않은 내용을 발견할 수도 있다. 누락된 문서는 master 브랜치에 추가한다. 제시된 이슈들이 master 브랜치 상에서 이미 해결되었는지 여부를 확인하려면 먼저 Edge Guides를 확인한다. 스타일과 규칙에 대해서는 Ruby on Rails Guides Guidelines을 확인한다.

어떤 이유로든 고칠 수 있지만 직접 패치 할 수 없는 경우 이슈를 새로 오픈하면 된다.

그리고 마지막으로, 루비온레일스 문서에 관한 모든 논의는 rubyonrails-docs 메일링 리스트 상에서 언제든지 가능하다.