Skip to main content

How to use ActionText in Rails 6 Discussion

General • Asked by Chris Oliver

Great stuff Chris! Very exciting. I also just watched the @mention episode too.

To anyone reading this, a few questions:

  1. Do you think we can get @mentions working on our Rails 5.2 app that has the Trix editor installed?
  2. Can we install the Trix editor on comments too, so that the @mentions would work there as well?
  3. What about on the live chat with actioncable? Are we in trouble there because the live chat doesn't use the Trix editor?
  4. When do you think Rails 6 will be stable?
  5. Would it make sense to upgrade our current rails 5.2 app to 6, or is that trouble?

Thanks much!


What a great addition to Rails. Thanks for documenting it Chris!

In case this helps anyone (I had a hell of time troubleshooting this):

I ran into a really frustrating issue when I pushed to Heroku. Rich text (trix) with image uploading was all working fine locally, but on Heroku dropped-in images weren't saving, and the issue had to do with my using Amazon S3.

Turns out it was a CORS issue, which Chris made a video about here:
https://gorails.com/episodes/cross-origin-resource-sharing-with-rails?autoplay=1

In addition to that, I had to set my CORS configuration in my S3 bucket settings. This was the configuration that ended working for me:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

I have been following the tutorial closely, however, I was not able to resolve the issue which you resolved purely by uncommenting gem 'image_processing', '~> 1.2'. Picture in my post would still remain broken.

I am running Rails 5.2.2, Ruby 2.6.0, and I am also using mini_magick gem after following your other tutorial on user avatars. Any chance that this can cause the problem?

Doesn't this require Rails 6?

Yes it does, but I think adding the Trix gem to rails 5.2.2 may solve the problem.

Haven't tried it though, all of my apps have been upgraded to 6.0.0RC1 so far.


Is there a way to limit the formatting options in the Trix editor? For example, if I don’t want users to enter links or upload images, is there a way I can configure the editor so that those options are disabled and not just not shown (I can do the latter via CSS).


After uncommenting image_processing gem I still have broken image :(
Will post fix when I find it.

Fixed it - You need have ImageMagick or GraphicsMagick installed locally.
For me on a mac I used

brew install imagemagick

Great video. With the abstration in ActionText, what's the best pattern for something like pg_search? Does ActionText provide clear cut way to access the association and search against the content from the model to which it belongs?

Digging in console (docs are a little bare at the moment) shows that you can reference the association like so:

my_model.rich_text_description

So, with pg_search, you can do this:

pg_search_scope :search_description,
  associated_against: {
    rich_text_description: :body
  }

But I'm still keen to know if there's a better way.


Hi Chris,

I've run into a weird problem after adding ActionText to my app. The second level nested comments (I followed your tutorial) on my posts will not display text for some reason. The original post displays rich text. Then, I can comment on it and the first level comment displays fine. But, if I comment on a comment no text will show up.

The old plain text, second level comments also dissappeared.

I inspected the element and it looks my code pulls in class="trix-content" and then the comment body. for the first level comment. But, on the second level there is no body being pulled in.

It's weird because these comments worked before ActionText. Any thoughts?



Anybody know how to make the trix editor look fine on mobile?

If you have this issue, set this in node_modules/trix/dist/trix.css:

 .trix-button-row { 
   display: flex; 
   flex-wrap: wrap; 
   justify-content: space-between; 
 } 

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.