How to implement nice image uploader to TinyMCE

Our Active Bridge Company ( always try to
learn smth new and share it with ruby community. Today let’s speak about
TinyMCE and image uploader.
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
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
Add to Gemfile

gem ‘tinymce-rails-imageupload’, github:
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:
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: