Screencast: Mercury Online Editor

Mercury ist ein auf HTML5 basierender Web-Editor mit dem Inhalte direkt im Browser bearbeitet werden können. In dem folgenden Screencast zeigt Ryan wie es in eigenen Applikationen eingebunden und benutzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

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',
...

Eingestellt am 07.11.2011 um 11:04

Kategorie: Tutorials

Be Sociable, Share!

Kommentare für diesen Artikel wurden geschlossen.

Suchen auf rubyonrails.de

Aktuelle Rails Version + Abhängigkeiten:

Gem rails-3.0.0
actionmailer (= 3.0.0, runtime)
actionpack (= 3.0.0, runtime)
activerecord (= 3.0.0, runtime)
activeresource (= 3.0.0, runtime)
activesupport (= 3.0.0, runtime)
bundler (~> 1.0.0, runtime)
railties (= 3.0.0, runtime)

Rails auf Rubyforge
Rails auf Github