In this article I will guide you to use the tinymce-rails gem to add text editor functionality.  TinyMCE is a rich text editor that outputs HTML, makes it easy to add content in rails application.

First you need to add the tinymce-rails gem to our gemfile.

gem 'tinymce-rails'

Next, you need to create the tinymce config file.

Lets create a file inside the config folder buy the name tinymce.yml and add the following code:

theme_advanced_toolbar_location: top
theme_advanced_toolbar_align: left
theme_advanced_statusbar_location: bottom
theme_advanced_buttons3_add:
  - tablecontrols
  - fullscreen
plugins:
  - table
  - fullscreen

Now save it!

Next, you have to add the TinyMCE assets

If you use the TinyMCE globally throughout website, then you need to add the following code in the application.js :

//= require tinymce

If you are not going to use TinyMCE throughout the website, then you need to open the view which will be using TinyMCE and add the following code at the top:

<%= tinymce_assets %>

Finishing up

Finally, need to add a css class to the text area called tinymce. Like this:

<%= f.text_area :body, class: "tinymce" %>

One last thing, we need to add the following helper to the bottom of the view to initialize TinyMCE:

<%= tinymce %>