This guide provides you with all you need to get started in handling rich text content.
After reading this guide, you will know:
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.
Most WYSIWYG editors are wrappers around HTML’s
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.
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.
rails action_text:install to add the Yarn package and copy over the necessary migration.
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
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.
You're encouraged to help improve the quality of this guide.
Please contribute if you see any typos or factual errors. To get started, you can read our documentation contributions section.
You may also find incomplete content or stuff that is not up to date. Please do add any missing documentation for master. Make sure to check Edge Guides first to verify if the issues are already fixed or not on the master branch. Check the Ruby on Rails Guides Guidelines for style and conventions.
If for whatever reason you spot something to fix but cannot patch it yourself, please open an issue.
And last but not least, any kind of discussion regarding Ruby on Rails documentation is very welcome on the rubyonrails-docs mailing list.
© 2004–2019 David Heinemeier Hansson
Licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.