Is it possible to use tinyMCE with rails_admin?

Question

I really like rails_admin, but my clients don't like CKEditor. Is this really the only option for WYSIWYG on this gem? Is there any way to use tinyMCE with rails_admin?

Monovalent

Answer 1

after struggling to get CKEditor working properly in RailsAdmin (on Rails 3.1), I used tinymce: It works well and is done in minutes:

in your gemfile add:

gem 'tinymce-rails'

plus you inlcude a line in rails_admin.js.erb:

require_asset 'tinymce-jquery'

you may need to copy the whole file (rails_admin.js.erb) from the gem to /assets/javascripts/rails_admin/ before you do this.

finally, you will also need to add some jquery to the view files
app/views/rails_admin/main/edit.html.haml and app/views/rails_admin/main/new.html.haml

 :javascript 
   jQuery(function() { 
     jQuery('textarea').tinymce({ 
       theme: 'advanced' 
     }); 
   }); 

This will add the Wysiwyg to all text area fields.

Sharpeared

Answer 2

WYSIWYG editors typically just overlay an HTML text area element with JavaScript functionality. So any editor should work in theory. You could replace the references in the code to tinyMCE, make sure you have all the files properly installed and then set tinyMCE to use the ID of the text area control.

It should not make a difference to the back-end programming which client side interface is used to create HTML in the text area.

Bigg

In theory, yes, but I'm not sure of how deeply CKEditor is integrated into the rails_admin codebase, and I was hoping for a little clarification in that area, so I can see if this is even worth hacking. – Monovalent

Answer 3

Great andistuder, I propose a modified version of your solution.

Copy the rails_admin.js.erb from the gem to the /assets/javascripts/rails_admin/ in your project path. Add the following line:

...
require_asset 'tinymce-jquery'
%>
jQuery(function() {
     jQuery('textarea').tinymce({
       theme: 'advanced'
     });
});

And all will works like a charm!

Minuend

With this method, tinymce is not loaded when the page is loaded using ajax. It only works after a refresh or a full page load. – Machutte

Answer 4

I achieved this in a slightly different way, which worked for:

• rails_admin (0.8.1)
• tinymce-rails (4.4.1)

Implementation:

Gemfile

gem 'tinymce-rails'

app/assets/javascripts/rails_admin/custom/ui.js

//= require tinymce-jquery

var admin = {
  initTinyMce: function() { tinyMCE.init({ selector: "textarea[name$='_html]'" }) }
}

$(function() {
  admin.initTinyMce();

  $(document).on('rails_admin.dom_ready', function() {
    admin.initTinyMce();
  });
});

Explanation

https://github.com/sferik/rails_admin/wiki/Theming-and-customization

• Suggests the ui.js location
• Suggests to use rails_admin.dom_ready

https://github.com/spohlenz/tinymce-rails

• //= require tinymce-jquery: no ruby interpolation required and I like using manifest files

Custom:

• I needed to run the initialization twice, all seems good so far
• The selector textarea[name$='_html]' will convert all text areas where the field ends in _html, that's what I store, that's how I name my fields

Systaltic