Home › Blog › Web Development

Nowadays, TinyMCE is considered to be one of the most popular text editors for HTML.
The text editor has earned its popularity due to the following factors:
1. easy to install
2. comprehensive and clear documentation
3. quite a large amount of plugins

TinyMCE + Rails 4

To work with TinyMCE in Rails application we recommend using gem tinymce-rails.
All the instruction for the installation of the gem is greatly described in the ReadMe:
However, we will pay our attention to the main points. Below is an example of the script tinyMCE.init

$(document).on 'page:load ready', ->
    plugins: ['image textcolor colorpicker codesample']
    toolbar: 'forecolor backcolor | image | codesample'
    selector: 'textarea.tinymce'

plugins - list of included plugins
toolbar - list and order of tools
selector - HTML element, to which TinyMCE will be linked up

Ttypical mistake: if you’re using tinyMCE.init, there is no need to create tinymce.yml file.

TinyMCE has an image uploader which is not very convenient

We believe that one of the best solutions for this issue is a gem called tinymce-rails-imageupload.
Add to Gemfile

gem 'tinymce-rails-imageupload', github: 'PerfectlyNormal/tinymce-rails-imageupload'

now we have to replace plugin from image to uploadimage, this also applies to the toolbar.
So far, our script looks like:

$(document).on 'page:load ready', ->
    plugins: ['textcolor colorpicker codesample uploadimage']
    toolbar: 'forecolor backcolor | uploadimage | codesample'
    selector: 'textarea.tinymce'

The next step is to create an action for uploading images

  def upload_image
    upload = Cloudinary::Uploader.upload(params['file'])
    render json: { image: { url: upload['url'] } }, content_type: 'text/html'

In this example, we’re using Cloudinary for uploading, but you’re free to use whatever technology you prefer. And don’t forget about router!

post '/tinymce_assets' => 'your_controller#upload_image'

Image uploader window: