#296 Mercury Editor

Nov 07, 2011 | 11 minutes | Views, Plugins

Mercury allows you to edit a section of HTML directly in the web browser through a WYSIWYG 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 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',
...