Geek Answers Handbook

Which wysiwyg editor can I use for my rails 3.1 application with image loader support?

I tried this editor , but got a lot of errors, maybe an existing editor, which I can easily install and update images.

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

+5
source share
3 answers

Im using tinymce with gem'tiny_mce' and carrierwavefor uploading an image. My setup for tinymce is as follows:

$(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 image_list_admin_static_images_urlin my routes:

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

The method in the StaticImagesController looks like this:

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

image_list, :

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

, . , . TinyMCE - wysiwyg.

chech, , active_admin:

, :   match "admin/model_name/:id/js_image_list", :action => "js_image_list", :controller => "admin/model_name". js_image_list admin. tinyMCE.init: external_image_list_url : "js_image_list"

+6

, tinymce 3.1.
http://rubygems.org/gems/tinymce-rails

, , Gemfile

gem 'tinymce-rails'

application.js , jquery .

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

jquery, js.coffee, /

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

jquery, script

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

tinymce Rails. tinymce . .

twitter bootstrap, :

https://github.com/jhollingworth/bootstrap-wysihtml5

-, HTML5, :

http://jejacks0n.github.com/mercury/

Awesome!

0

More articles:


All Articles