Sign in through GitHub
Mercury Editor

#296 Mercury Editor

Nov 07, 2011 | 11 minutes | Plugins, Views
Mercury allows you to edit a section of HTML directly in the web browser through a WISYIWYG editor. Here I show how to integrate Mercury into a Rails app and save the changes back to the database.
Click to Play Video ▶
  • Download:
  • source codeProject Files in Zip (88.9 KB)
  • mp4Full Size H.264 Video (32.8 MB)
  • m4vSmaller H.264 Video (15.4 MB)
  • webmFull Size VP8 Video (16.6 MB)
  • ogvFull Size Theora Video (39.7 MB)
Browse_code Browse Source Code

Resources

Gemfile 
gem 'mercury-rails', git: 'https://github.com/jejacks0n/mercury.git', ref: 'a2b16bcdc9'
bash 
bundle
rails g mercury:install
rake mercury_engine:install:migrations
rake db:migrate
pages/show.html.erb 
<h1><span id="page_name" class="mercury-region" data-type="editable"><%= raw @page.name %></span></h1>
...
<div id="page_content" class="mercury-region" data-type="editable">
  <%= raw @page.content %>
</div>
<p><%= link_to "Edit Page", "/editor" + request.path, id: "edit_link", data: {save_url: mercury_update_page_path(@page)} %></p>
config/routes.rb 
resources :pages do
  member { post :mercury_update }
end
pages_controller.rb 
def mercury_update
  page = Page.find(params[:id])
  page.name = params[:content][:page_name][:value]
  page.content = params[:content][:page_content][:value]
  page.save!
  render text: ""
end
app/assets/javascripts/mercury.js 
$(window).bind('mercury:ready', function() {
  var link = $('#mercury_iframe').contents().find('#edit_link');
  Mercury.saveURL = link.data('save-url');
  link.hide();
});

$(window).bind('mercury:saved', function() {
  window.location = window.location.href.replace(/\/editor\//i, '/');
});
views/layouts/mercury.html.erb 
...
saveStyle: 'form',
...