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.
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"
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With