Search code examples
ruby-on-railseditorwysiwygimage-uploading

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


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.


Solution

  • 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"