Quite often we find ourselves needing to add rich text functionality to our text areas.  Doing so allows us to easily edit rich, dynamic data for things like blog posts, reviews, and much more.  In this article we will use the tinymce-rails gem to add this functionality.  TinyMCE is a rich text editor that outputs HTML, making it really easy to add rich content to our rails application.

 

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

Open Gemfile in the root of your application folder and add the following line:

gem 'tinymce-rails'

Next, create the tinymce config file.

Create a file in the config folder called 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

Next, add the TinyMCE assets

If you are going to be using TinyMCE globally throughout your site, add the following code to your application.js underneath the last require line:

//= require tinymce

If you aren't using TinyMCE throughout your site, you can open the view that will be utilizing TinyMCE and add the following code at the top:

<%= tinymce_assets %>

Finish up

Finally, add a css class to your text area called tinymce. For example:

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

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

<%= tinymce %>

That's it! You are all set! For more information on tinymce-rails please visit their site at:https://github.com/spohlenz/tinymce-rails.