ActionText: Trix
This course follows ActionText in a Rails app from storage to rendering. It starts with the shared polymorphic table action_text_rich_texts and what has_rich_text defines. It then covers the Trix editor and its fixed HTML vocabulary, sanitization that runs at render time, and attachments stored as signed references to ActiveStorage blobs. Later lessons style rich text under a CSS reset, swap Trix for Lexxy without changing storage, and trace a lesson note from form submission back to the editor.
What you'll learn
- ✓How has_rich_text stores content in one polymorphic table
- ✓How the Trix editor and rich_text_area submit HTML through a form
- ✓Where ActionText sanitizes HTML and which tags and attributes survive
- ✓How attachments use direct upload, signed global IDs and ActiveStorage blobs
- ✓Styling rendered rich text and the editor inside scoped CSS classes
- ✓Replacing Trix with Lexxy while models, storage and rendering stay the same
Rich text is a polymorphic record
Every Rails model that stores plain text keeps it in a column on its own table: a body column, a description column, one per field. ActionText takes a different approach. It stores rich content in a single, shared table called action_text_rich_texts, and links each row back to its owner through a…
Read the full lesson free →Curriculum
7 lessonsRich text is a polymorphic record
ActionText stores every rich text field in one shared table, linked to its owner by a polymorphic key.
Trix: the default editor
Trix renders a custom element that writes a fixed set of HTML tags into a hidden form input.
Sanitization: which HTML survives
ActionText stores submitted HTML unchanged and sanitizes it on render, using an allow list that Lexxy extends.
Attachments: Trix meets ActiveStorage
Attachments upload through ActiveStorage before submit and live in rich text as tags with signed global IDs.
Rendering and styling rich text
Rich text renders with one view call and needs scoped CSS to restore styles a CSS reset removes.
Swapping the editor: Trix to Lexxy
This app runs Lexxy in place of Trix, changing JavaScript, form output and editor CSS but not storage.
ActionText: putting it together
A lesson note is traced from the editor through the controller and storage back into the editor, while comments show the render step.