Action Text
Action Text
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.
Adding Action Text and the Trix editor for rich text editing in Rails 7 involves a few steps. Here's a general guide on how to do it:
A general approach for supporting rich text editing in Rails 7 using Action Text and Trix.
Trix is the default rich text editor for Action Text.
Here are the steps you would follow:
1. Add the Action Text gem:
Ensure your Gemfile includes the actiontext gem, and then run bundle install to install it.
2. Add require "action_text/engine" to config/application.rb.
3. Install Action Text: Run the installation command bin/rails action_text:install.
This will create the necessary migration file and add the JavaScript files for Trix.
4. Migrate the Database: Run the migration with rails db:migrate.
This will add the necessary tables to your database.
5. Add rich text field while creating a new model using: bin/rails generate model Post content:rich_text
Or manually add Action Text to your model: has_rich_text :content in the Post model.
6. Use Action Text in your form: In the form for the model, you can now use the rich_text_area form helper. Here's an example:
<%= form_with(model: @post) do |form| %>
<%= form.label :article %>
<%= form.rich_text_area :article %>
<%= form.submit %>
<% end %>
7. Display the rich text in your views: You can use the @model.attribute_name to display the rich text content. For example, <%= @post.article %>. This will display the rich text with all its HTML formatting.
8. Styling the content: The HTML generated by Action Text is designed to be styled by your application's CSS. You can add custom CSS to style the rich text content.
9. Attachments: Action Text also supports attachments. By default, these are uploaded to Active Storage, and you can attach files using the Trix editor.
Note that you may need to restart your Rails server after installing Action Text and running the migration.
Disable the Storage / Blob Uploading feature
By default, Action Text uses Active Storage for handling file attachments. Even if you're not planning to upload any files, the Action Text initializer still expects Active Storage to be set up in your application.
If you are not using Active Storage in your Rails application and you have no plans to upload files, you might want to comment out or remove the following line from your config/application.rb: require "active_storage/engine". This line is responsible for loading Active Storage. If you're not using it, you can comment out or remove this line.
After doing this, you will also need to remove or comment out any other Active Storage configurations in your application. This includes any references to Active Storage in your models and controllers.
Please make sure to restart your server after making these changes.
If you don't want to use the file upload feature in Action Text, you can customize the Trix editor to disable this functionality. You can use some custom JavaScript to prevent Trix from listening to the file attachment event.
Create a new file in your `app/javascript/packs` directory named `trix.js` and add the following code:
document.addEventListener('trix-file-accept', function(event) {
event.preventDefault();
alert("File upload not allowed!");
});
This code listens for the 'trix-file-accept' event, which is fired when a file is dropped or pasted into the Trix editor. The `event.preventDefault()` function is called to cancel the file upload, and an alert is shown to the user.
Then, make sure you are importing this file in your `application.js` file:
require("trix")
require("@rails/actiontext")
require("./trix") // Add this line
Finally, restart your Rails server for the changes to take effect.
This will disable file uploads in the Trix editor, which is used by Action Text. Note that this will affect all instances of the Trix editor in your application.
Last updated