Rails: How to implement Action Text in Rails 5.2.1?

Question

I'm experiencing difficulties in implementing the Action Text gem to my Rails 5.2.1 application.

I followed the installation guide and the rich text editor wouldn't show up in my _form view.

I then realised that it requires Rails 6 with webpacker and active storage. Changing my gemfile's Rails version and running rails upgrade didn't work, so I added the webpacker and active storage gems and bundled it with my current 5.2.1 version. That didn't work either.

I'd really like to have a Rich Text Editor in my app. It is not a must that it is the Trix editor, but since it will be native as of v6 I thought it was the obvious choice.

References of my source code

• GitHub: https://github.com/Curting/mydanceplan
• Heroku: https://mydanceplan.herokuapp.com/

Answer 1

The perfect choice ,tested on my new application using rails 5.2.3 . please not action text require ruby 2.5.3 up. first : Add webpacker

You can either add Webpacker during setup of a new Rails 5.1+ application using new --webpack option:

Available Rails 5.1+

rails new myapp --webpack

Or add it to your Gemfile:

Gemfile

gem 'webpacker', '~> 4.x'

OR if you prefer to use master

gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
yarn add https://github.com/rails/webpacker.git

Now add Actiontext to your gem file with image magic:

gem'actiontext',github:'kobaltz/actiontext',branch:'archive',require:'action_text'
gem 'image_processing'

Finally, run the following to install Webpacker:

bundle
bundle exec rails webpacker:install

rails action_text:install
rails db:migrate
brew install imagemagick vips

add this to your view/layout/application in the head section

#layouts/application.html.erb
<%= javascript_pack_tag 'application' %>

In your model , it may be an article or what ever in your model

class Article < ApplicationRecord
  has_rich_text :content
end

in your controller

 #controllers/articles_controller.rb
    def article_params
      params.require(:article).permit(:name, :content)
    end

in your form

#_form.html.erb
<div class="field">
  <%= form.label :content %>
  <%= form.rich_text_area :content %>
</div>

finaly to display the content in your view;

<h1><%= @article.name %></h1>
<p><%= @article.content %></p>

Optional: To fix "unmet peer dependency" warnings,

yarn upgrade

you can watch the full video here: https://www.driftingruby.com/episodes/using-action-text-in-a-rails-5-2-application

Answer 2

I have a partial answer for you! I wanted to use Trix, Rails 5.2.2, and Webpacker, but couldn't find a clear answer. The trix gem didn't work since I don't use the asset pipeline at all. (I also use Turbolinks and Stimulus, and so far this is working fine alongside those.)

I strung a solution together using:

• trix node package
• a custom form tag helper, derived from this Stack post

I can now use a form helper that looks like this (using the Slim templating language):

= f.trix :personal_notes, class: 'some-css-class'

To get there, I did the following:

1. yarn add trix
2. In my Javascript pack, import 'trix';
3. In my CSS pack, @import '~trix/dist/trix';
4. Then I created the form helper. Here's what that looked like:

In app/helpers/application_helper.rb, I added the new form helper, based on that Stack post I linked above. My file now looks like this:

module ApplicationHelper
    # ...

    class ActionView::Helpers::FormBuilder
        # include ActionView::Helpers::TagHelper # I didn't need this.
        include ActionView::Helpers::FormTagHelper
        include ActionView::Helpers::FormOptionsHelper
        # include ActionView::Helpers::CaptureHelper  # I didn't need this.
        # include ActionView::Helpers::AssetTagHelper  # I didn't need this.

        # since these tag helpers just return strings, it is easy to make a pretty 
        # powerful helper.  It is probably possible to use existing Rails form 
        # helpers to aid this as well.
        def trix(method, options = {})
          value = (@object[method].empty?) ? '' : "value='#{@object[method]}'" 
          return "<input id='#{field_id(method)}' type='hidden' name='#{field_name(method)}' #{value}><trix-editor input='#{field_id(method)}' class='trix-content #{options[:class]}'></trix-editor>".html_safe
        end

        def field_name(label,index=nil)
          return @object_name + "[#{label}]"
        end

        def field_id(label,index=nil)
          return @object_name + "_#{label}"
        end

    end
end

Restart Rails. Seems to work for me.