What wysiwyg editor can I use for my rails 3.1 app with support of image uploader?

Question

I tried this editor, but received many errors, maybe existing some editor, which I can easy install and update images.

My answer: Now I use this editor, very easy to install.

Answer 1

Im using tinymce with the gem 'tiny_mce' and carrierwave for image upload. My setup for tinymce is following:

$(function() {
  tinyMCE.init({
    mode: "textareas",
    editor_deselector: "plain",
    theme: "advanced",
    plugins: "advimage,inlinepopups,save,autosave",
    external_image_list_url: '#{image_list_admin_static_images_url}',
    relative_urls: false,

    theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect",
    theme_advanced_buttons22: "",
    theme_advanced_buttons3: "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_blockformats: "p,h2,h3,h4"
  })
}

The important part is image_list_admin_static_images_url in my routes i have:

resources :static_images do
      get :image_list, :on => :collection
end

Method in StaticImagesController looks like:

 def image_list
    @image_list = "var tinyMCEImageList = #{StaticImage.image_list.to_json}"
    render :js => @image_list
 end

And in image_list method located in the model:

 def self.image_list
    all.map{ |im| [im.alt, im.image.url] }
 end

This setup works perfectly for me, ofc you need to customize it for your own needs. Hope this will help you. TinyMCE is really nice and powerfull wysiwyg editor.

As chech suggested in the comments section, here is how you can adjust this solution for use with active_admin:

To use it inside active admin simply replace the route for this one: match "admin/model_name/:id/js_image_list", :action => "js_image_list", :controller => "admin/model_name". Then create an action called js_image_list inside the active admin model file. Configuration for tinyMCE.init is: external_image_list_url : "js_image_list"

Answer 2

It seems like tinymce is definitely supported by rails 3.1. Here is the link
http://rubygems.org/gems/tinymce-rails

All you have to do is add the following to your Gemfile

gem 'tinymce-rails'

You have the following options to add to application.js depending on whether you want to use jquery or not

//= require tinymce-jquery
//= require tinymce

Personally I chose jquery so I added this line to the js.coffee file corresponding to my controller/view

tinyMCE.init
  mode: 'textareas',
  theme: 'advanced'

If you don't want to use jquery you can just add this script to your view

<script type="text/javascript">
  tinyMCE.init({
    mode: 'textareas',
    theme: 'advanced'
  });
</script>