EditMode Build Status

edit_mode is a ruby on rails gem that allows you to toggle an edit mode on a normal show view. Think of it as a grouped in-place editing. This also toggles best_in_place fields.

The edit mode is activated by pressing an 'edit' button on a show view. This shows additional editing tools and switches on the best_in_place form fields. When editing is finished, use 'save' or 'cancel' buttons to quit the edit mode and return to a normal show view. Several editing groups per page are supported. Thus, you can have several 'boxes' to edit on a page.


You might want to have a look at this demo app at heroku.

The code of this demo app can be found here.


Add this line to your application's Gemfile:

gem 'edit_mode'

And then execute:

$ bundle

Or install it yourself as:

$ gem install edit_mode

Include Assets

In app/assets/javascripts/application.js, add:

//= require edit_mode

In app/assets/stylesheets/application.css, add:

 *= require edit_mode


Basic View

For a basic example, see: https://github.com/fiedl/edit_mode/blob/master/test_app/app/views/users/show.html.erb


The edit mode is toggled within a <span class="edit_mode_group"></span>. The buttons to 'edit', 'save' and 'cancel' should also be placed inside this span.

You can also have several edit_mode_group spans on a page, as shown in the demo app.

Tool Buttons

To enter and exit the edit mode, use buttons 'edit', 'save' and 'cancel'. These can be anchors, images, et cetera. They only have to have the correct css classes:

<span class="edit_mode_group">
  <a class="edit_button" href="#">edit</a>
  <a class="save_button" href="#">save</a>
  <a class="cancel_button" href="#">cancel</a>


Within the edit_mode_group span, you may place certain elements that should only be shown when in edit mode. You can use this for 'add' buttons or 'destroy' buttons.

<span class="edit_mode_group">
  <span class="show_only_in_edit_mode">
    <a href="#">add</a>

The same, the other way round:

<span class="edit_mode_group">
  <span class="do_not_show_in_edit_mode">
    <img src="..." alt="This picture is not shown in edit mode." />


In the edit_mode_group span, all best_in_place elements are toggled as well.

'.editable' Triggers

If you need custom behaviour inside the edit_mode_group span, you can use these triggers: For all elements of the class .editable, the events edit, save and cancel are triggered, when entering or exiting edit mode.

<span class="edit_mode_group">
  <span class="editable custom_element">Test</span>

Bind the event via JavaScript, e.g. with jQuery:

jQuery ->
  $( ".custom_element" ).bind( "edit", ->
    alert( "This element has just entered edit mode." )




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