X-editable for Rails
Add this line to your application's Gemfile:
gem 'x-editable-rails'
And then execute:
$ bundle
Or install it yourself as:
$ gem install x-editable-rails
Insert files to your application
#= require editable/bootstrap-editable
You can choose between bootstrap-editable/bootstrap2-editable/jqueryui-editable/jquery-editable-poshytip
*= require editable/bootstrap-editable
You can choose between bootstrap-editable/bootstrap2-editable/jqueryui-editable/jquery-editable
You can also insert this file
#= require editable/rails
This is simple helper using CanCan
First you need to create simple helper, which returns true or false (if is editable enabled or not)
def xeditable?
true # Or something like current_user.xeditable?
end
and this is how to use helper method
%h1= editable @page, :name, e: @page.name
# editable object, what_you_want_update, e: exception - when is xeditable? false or can? :edit, object is false
or with nested attributes (globalize3 example)
%h1= editable @page, :name, nested: :translations, nid: @page.translation.id, e: @page.name
# nested: nested attributes, nid: id of nested attribute
Example of nested resource
%h1= editable [picture.gallery, picture], :name, nested: :translations, nid: picture.translation.id, e: picture.name
You can also update everything directly.
%a{href: '#', class: 'editable', data: { type: 'text', model: 'post', name: 'name', url: post_path(post), 'original-title' => 'Your info here'}}= post.name
or if nested
%a{href: '#', class: 'editable', data: { type: 'text', model: 'post', nested: 'translations', name: 'name', nid: "#{post.translation.id}", url: post_path(post), 'original-title' => 'Your info here'}}= post.name
You need to specify:
- data-model
- data-name
- data-url
When updating nested attributes also:
- data-nested
- data-nid
And don't forget to activate it
$('.editable').editable()
Wysihtml5 editor
If you want edit text with wysihtml5 editor, you need to load his dependencies For js
#= require editable/bootstrap-editable
#= require editable/inputs-ext/wysihtml5
#= require editable/inputs-ext/bootstrap-wysihtml5
#= require editable/inputs-ext/wysihtml5-editable
#= require editable/rails
And css
//= require editable/bootstrap-editable
//= require editable/inputs-ext/bootstrap-wysihtml5
//= require editable/inputs-ext/wysiwyg-color
= editable @page, :content, nested: :translations, nid: @page.translation.id, type: :wysihtml5, e: @page.content.html_safe
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request