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

[ruby]
gem ‚mercury-rails‘, git: ‚https://github.com/jejacks0n/mercury.git‘, ref: ‚a2b16bcdc9‘
[/ruby]

bash

[bash]
bundle
rails g mercury:install
rake mercury_engine:install:migrations
rake db:migrate
[/bash]

pages/show.html.erb

[html]
<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>
[/html]

config/routes.rb

[ruby]
resources :pages do
member { post :mercury_update }
end
[/ruby]

pages_controller.rb

[ruby]
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
[/ruby]

app/assets/javascripts/mercury.js

[javascript]
$(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, ‚/‘);
});
[/javascript]

views/layouts/mercury.html.erb

[html]

saveStyle: ‚form‘,

[/html]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.