6

I am reacquainting myself with Rails and I am really liking Active Admin. I would like to get tinyMCE working with it for use in text areas. However, any instructions I find are incomplete. For some reason, I think that I am missing something really simple here.

So, for example, I have tinymce-rails installed (3.4.9) and followed the instructions (https://github.com/spohlenz/tinymce-rails). However, here's where I think I failed: actually initiating tinyMCE. According to the doc, I have two options:

  1. use the <%= tinymce %> helper or...
  2. initialize it like the following tinyMCE.init({ mode: 'textareas', theme: 'advanced' });

I tried adding the latter to my active_admin.js file to no avail.

If someone could guide me on this, I would be most appreciative.

JP Smith
  • 61
  • 1
  • 2

2 Answers2

15

I got it working doing the following things (outside of the install described at the repo)

In admin/my_class.rb:

ActiveAdmin.register MyClass do
  form do |f|
    f.inputs do 
      f.input :body, :input_html => { :class => "tinymce" }
    end
  end
end

In initializers/active_admin.rb:

...
config.register_javascript 'tinymce.js'

This was what actually got the tinymce.js script to show up in the head of the admin layout.

In javascripts/active_admin.js:

//= require active_admin/base
//= require tinymce

$(document).ready(function() {
  tinyMCE.init({
     mode: 'textareas',
     theme: 'advanced'
   });
});

After doing those things, that body input (text area) had a fully functioning editor on it.

mcmaloney
  • 2,374
  • 3
  • 19
  • 19
  • Good documentation. Works with rails 3.2.13, active_admin 0.6.0, and tinymce-rails 3.5.8.2. – scarver2 Jun 07 '13 at 17:27
  • 2
    Add `editor_selector: 'tinymce'` to `tinyMCE.init` so that only specific textareas have the WYSIWYG editor. – scarver2 Jun 07 '13 at 17:28
  • for you who has coffescript instead of pure javascript, convert your `tinyMCE.init` into coffe with this tool http://js2.coffee/ – Seto Jun 10 '18 at 16:58
0

Do your textarea inputs have a 'class' attribute or something that tinyMCE can hook into? Does it work from the javascript console (firefox/chrome)? Have you checked the presence of tinymce.js in the head(source) of your page.

I got it working with a form partial, and I had to give a class to the input element so tinymce could hook to it.

<%= f.input :literature_nld, :input_html => { :class => 'tinymce', :size => "80x4" } %>

Good luck

Sjors Branderhorst
  • 2,138
  • 17
  • 25
  • Thanks. Your response triggered another thought about whether or not tinymce.js was in the head of my page. The tinymce-rails documentation was a little unclear on this. It turns out that by adding a call to this in my active_admin.rb file, I was able to get it to show. Many thanks for all your help! – JP Smith May 03 '12 at 01:19
  • Would have been nice though if you had accepted my answer, I should have just commented. – Sjors Branderhorst May 29 '17 at 18:50