Categories
ruby ruby on rails

Adding TinyMce editor to Rails Admin

RailsAdmin is a Rails engine that provides an easy-to-use interface for managing your data. Rails admin is like bootstrap admin interface for your web app / site. To add tinymce editor to all textareas in rails_admin first add the tinymce-rails gem to your Gemfile and run bundle install.

Gemfile

gem 'tinymce-rails', :git => 'git://github.com/spohlenz/tinymce-rails.git', :branch => 'tinymce-4'

Now got to app/assests/javascripts/rails_admin folder and include the tinymce javascript libraries to rails_admin.js.erb file like this

//= require 'tinymce-jquery'

Now create a javascript file called tinymce.js in app/assets/javascripts/rails_admin folder and add the following code to invoke tinymce on all textareas

function tinymce_load(){
  tinymce.init({
    selector: "textarea",
    plugins: [
     "advlist autolink lists link image charmap print preview anchor",
     "searchreplace visualblocks code fullscreen autoresize",
     "insertdatetime media table contextmenu paste"
    ],
    menu : "core",
    toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link"
  });
}
$(window).load(tinymce_load());
$(document).on('pjax:complete', tinymce_load );

A note on pjax line. RailsAdmin uses pjax for better user experience so we have to trigger the tinymce_load function when ever pjax is called so that the new textareas are also tinymced!

then include this file in rails_admin.js.erb file like

//= require 'rails_admin/tinymce'

Now restart your server and you have tinymce loading on all textareas. For more customization options of tinymce please refer their website.