X::Editable::Rails

X-editable for Rails

Installation

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

Usage

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:

1. data-model
2. data-name
3. data-url

When updating nested attributes also:

1. data-nested
2. 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

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request