Configuring TinyMCE for Rich Text in Rails
I have a client rails app with a really rich blog in it. The client needed the ability to add and edit rich text blog posts with custom headers, image embeds and more.
A great general use tool for this is TinyMCE. There is a great gem that packages this up for a rails implementation.
Getting Started
Get the gem added / installed. (see the gem readme for help on that)
If you don’t already have it you will need an object in your database with a column to hold all this formatted content. For example, this app uses a Post model with a column named Body. This column is a Text type.
From there, you can use the helpers to drop in the actual edit UI in your view.
However, by default this will render all of the default MCE edit components. Like this:
In my opinion this default set is way too many options for the average user. I just wanted to expose a basic set of formatting. Headers, bold, Italics, Text Align, etc. My client has no use for Tables or some of those advanced tools.
So, you can configure all this in the added ‘tinymce.yml’ file the gem spits out. It’s amazing, you can add and reorder menu items to dial in just what you need.
For example, here is the set we currently have with it’s yml configuration for comparison:
Customizing TinyMCE in Rails
My client asked have the ability to add bulleted lists into this interface. So, jumping into the tinymce.yml file I can simply add this as a menu option. You can dig through all the available options / configurations from the TinyMCE docs.
It’s as simple as adding lists within plugins and bullist and numlist to the toolbar within the plugins section of the yaml file.
Now, here is the revised tinymce.yml file and the current editor:
Hope that helps! If you have any questions on this feel free to ping me on twitter or email me.
