Rails: How to implement Action Text in Rails 5.2.1? - ruby-on-rails

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:
yarn add trix
In my Javascript pack, import 'trix';
In my CSS pack, #import '~trix/dist/trix';
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.