All threads / How to use ActionText in Rails 6 Discussion

Ask A Question

Notifications

You’re not receiving notifications from this thread.

How to use ActionText in Rails 6 Discussion

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!

Reply

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>

Be careful: you shouldn't allow any origin ("*") in your config CORs.

Reply

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?

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.

Reply

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).

@HP Also curious about this. Did you find a solution apart from hiding them in CSS?

Not yet. The CSS approach would not have worked in this specific case so I treid mucking about in the source code but gave up as I didn’t feel like having to reivist the issue each time a Rails update rolls around.

I eventually settled on using Redactor as it gave me the control I needed for this project. Not as straightforward as ActionText though.

I do have some ideas on how to address the Trix editor configuration but have not had time to explore them. Will post here when I have something working.

Reply

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

Thanks! I'm not using macOS, but I use Ubuntu 20.04 and installing this worked for me. If you want the commands to install, are these.

sudo apt-get -y install imagemagick
sudo apt-get -y install libmagic-dev
sudo apt-get -y install libmagickwand-dev
Reply

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.

Reply

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?

Reply
Reply

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; 
 } 
Reply

Thanks, Chris!

It would be very useful if you'll published a lesson how to embed youtube, twitter, facebook posts into Trix editor.

Reply

Great tutorial Chris,

I could not get the image preview centre aligned till I changed my css to the following

.```
// actiontext.scss
form-control {

.attachment--content {
margin: 0.6em 0;
}

.attachment--content {
width: 100%;
text-align: center;
}

.attachment {
display: inline-block;
position: relative;
max-width: 100%;
margin: 0;
padding: 0;
}
}

Reply

How do you limit images uploaded size? or how can you resize them if to big?

Reply

So, I'm trying to set up ActionText to create a WYSIWYG editor on my blog, but I'm running into a bit of a strange bug - I noticed that ActionText allows me to add any number of attachments when I make a Post or edit a post for the first time, thereafter any attachments I try to add on any posts are not saved until I restart the server (either by making changes to the code and saving or shutting down the server and re-starting it)

All I see is the new image with a "progress bar" - see screenshot below - and when I save the post, it does not save the new image. enter image description here

[![error image][(https://i.stack.imgur.com/bcV9F.png)]]

The output on the console looks like this the first time.

and like this the second time

I'm not sure what the issue is - any idea what I am missing?

Reply

How can I customize the default size of the rich_text_area field, so that it displays longer vertically even before anything is typed in, and still retain the height: auto; scaling feature?

It doesn't seem like rich_text_area has any parameters like the regular text_area has.

Here is what I have so far:

<div class="form-inputs">
    <%= f.form_group :body, class: 'row' do |f| %>
      <%= f.label :body, class: 'control-label col-md-2' %>
      <div class='col-12 col-md-10'>
        <%= f.rich_text_area :body, class: 'form-control' %>
        <%= f.error_messages %>
      </div>
    <% end %>
trix-editor {
  &.form-control {
    height: auto;
  }
}

.form-control {
  .attachment--preview {
    margin: 0.6em 0;
  }

  .attachment--preview {
    width: 100%;
    text-align: center;
  }

  .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

You can set a min-height property for the trix editor, like so:

trix-editor {
  &.form-control {
    min-height: 400px;
    height: auto;
  }
}

I tested that in my dev environment and it works fine to ensure that the editor is taller on load and still expands with content being added.

Perfect! Wasn't aware about min-height. Thanks!

Reply
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 33,665+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.