#296 Mercury Editor

Awesome episode as always, thanks!

One question, though: Do you need to add an id to the edit link?

I usually filter by the data attribute. I mean, instead of this:

  var link = $('#mercury_iframe').contents().find('#edit_link');

I usually do something like this:

  var links = $('#mercury_iframe').contents().find('a:data(save-url)');

Am I missing some obvious drawback by using this approach?

Thanks for the cast! Looks great. Is it possible to edit the source html directly? That would be a must have for me to use Mercury Editor.

Nice editor, but what about rendering a flash if the editing doens't pass the validation?

This library appears to be very high quality and very well thought out. It doesn't pigeonhole you into any set back-end implementation, and focuses on a very flexible and intuitive front-end.

-Doug Puchalski
PENSCO
fullware

Thanks for the putting this screencast together! So awesome! And as always, useful -- even if it is my own project.

I've taken notes on some things that could be made nicer or simplified, so it's been invaluable for me. And I'll be pushing updates that address some of the things that could be improved on in the next few weeks.. I've also update the documentation to include a link to this railscast.

How do you add authentication checks on the /editor/.* routes?

I mean, I know you can:

• hide the link to the editor when not authenticated.
• refuse updates from the editor when not authenticated.

But I'd prefer the user be kicked out of the editor in case he/she has a bookmark to the editor and isn't logged in.

I'm having troubles with mercury params (Rails 3.1.1rc1). I can read from console

{"content"=>"{\"article_title\":{\"type\":\"editable\",\"value\":\"hello-ise\",\"snippets\":{}},\"article_body\":{\"type\":\"editable\",\"value\":\"\n \tworld\n \n \t \",\"snippets\":{}}}", "locale"=>"fr", "id"=>"1"}

Somehow, under rails 3,1, mercury seems to escape parameters. And params in controller is wrongly interpreted.

Am I the only one to feel stupid?

Thanks to enlight me

When i try to install mercury , and run rake mercury_engine:install:migrations

i get the following error

rake aborted!
Don't know how to build task 'railties:install:migrations'

any idea why this happens ?

Won't the browser just cache mercury.js? If so is it still necessary to stop it from loading on every request?

Nice episode as usual, thanks a lot.

I'm wondering how to activate Mercury editor on the 'new' view.

I tried redirecting /pages/new to /editor/pages/new like this :

match "/pages/new" => redirect("/editor/pages/new")

but without success.

I'd like to keep the usual new_path, which is conventional.

Hi, does anyone know how to use the snippets function?

I'm exploring this plugin for our company website so that the sales team can easily update content. So far I'm loving it, but the image uploading is a little bit mysterious to me. Maybe someone can explain the steps I'm missing to use the images feature. I tried dragging and dropping in an image and I'm receiving this error: "Unable to process response: TypeError: Cannot read property 'url' of undefined." I noticed in the server logs that the image was processed successfully with paperclip but it saves the image to public/system/images. Is there a way to configure where the images get saved? How would I go about customizing the image model?

The "mercury:saved" trigger doesn't seem to exist anymore.

Just a quick update: the two problems with the save event not getting fired and image drag&drop not working will be resolved if you update to the latest version from the git repository. (http://jejacks0n.github.com/mercury/) Note that you will have to rename your table to mercury_images instead of images if it already exists.

I can't get any events to fire:

$(window).bind('mercury:ready', function() { alert("$"); });
jQuery(window).bind('mercury:ready', function() { alert("jQuery"); });
function onMercuryReady() { alert("onMercuryReady"); }

Notta :(

With Rails 3.1.3 this does not seem to work. Mercury is escaping parameters. Here is a part of params hash:

Processing by PagesController#mercury_update as JSON
Parameters: {"content"=>"{\"page_name\":{\"type\":\"editable\",\"value\":\"about\",\"snippets\":{}},\"page_content\":{\"type\":\"editable\",\"value\":\"{\"page_name\":{\"type\":\"editable\",\"value\":\"about\",\"snippets\":{}},\"page_content

I googled and found a similar issue: https://github.com/jejacks0n/mercury/issues/85

What is the difference between https://github.com/balupton/mercury-rails and https://github.com/jejacks0n/mercury ?

Any way to use this in a simple form/textarea?

Would like the wysiwyg and GUI without the additional backend requirements.

First of all - thanks for the awesome Railscast.

I had same issues as described above. Solution:

_ read the README in the git repository https://github.com/jejacks0n/mercury/ exactly
_ use gem 'mercury-rails' in your Gemfile without pointing to the git repository
_ fire bundle update
_ make a backup of your changes in mercury.js
_ make a backup of your changes in mercury.html.erb
_ fire rails generate mercury:install
_ use the changed eventhandler declaration described from Chris Sessions above
_ use saveStyle: 'form' in mercury.htm.erb
_ throw away your backups - you don't need them ;-)

You should not have problems anymore. Relax!

Cheers

Andy

Can someone kindly advise how I can resolve this error? I got this after installing the gemfile. I am new to rails and ruby. Appreciate it!

ExecJS::RuntimeError in Articles#index
Showing C:/Sites/dummy/app/views/layouts/application.html.erb where line #6 raised:
SyntaxError: octal escape sequences "\00" are not allowed on line 512
(in C:/Ruby193/lib/ruby/gems/1.9.1/gems/mercury-rails-0.3.1/vendor/assets/javascripts/mercury/regions/editable.js.coffee)

Thanks for this great railcast!

Is there a tutorial for how to let user drag and drop images into the mercury enabled editing space?

Thanks!

Pier.

It works well in rails 3.2.3 with small change.
Be carefull , 'var saveURL' changed to 'var saveUrl' at the latest version of mercury.
Thanks.

If anyone still having a problem with saving the changes then add the following lines in your mercury.js file. Thanks to @seventhsense

  onload: function() {
    //Mercury.PageEditor.prototype.iframeSrc = function(url) { return '/testing'; }
    Mercury.on('ready', function() {
      var link = $('#mercury_iframe').contents().find('#edit_link');
      Mercury.saveUrl = link.data('save-url');
      link.hide();
    });

    Mercury.on('saved', function() {
      window.location.href = window.location.href.replace(/\/editor\//i, '/');
    });
  }

I'm pretty new to rails and mercury and I have some troubles to save.

I've implemented the editor on one controller and I want to send the save request to the same controller. I want to update so i use the "PUT" method right.

But the lo tells me that there is no route to url.

  def update
  .
  .
  .
  end


  include Mercury::Authentication

  layout :layout_with_mercury
  helper_method :is_editing?

  private

  def layout_with_mercury
    !params[:mercury_frame] && is_editing? ? 'mercury' : 'application'
  end

  def is_editing?
    cookies[:editing] == 'true' && can_edit?
  end

    <script type="text/javascript">
      // Set to the url that you want to save any given page to, leave null for default handling.
      var saveUrl = null

      // Instantiate the PageEditor
      new Mercury.PageEditor(saveUrl, {
        saveStyle: 'form', // 'form', or 'json' (default json)
        saveMethod: 'PUT', // 'PUT', or 'POST', (create, vs. update -- default PUT)
        visible:    true  // boolean - if the interface should start visible or not
      });
    </script>

Pitchdot::Application.routes.draw do
  
 
  mount Mercury::Engine => '/'

 resources :users
 resources :sessions, only: [:new, :create, :destroy]
 resources :pitchdecks 
 
  get "static_pages/privacy"

  root to: 'static_pages#home'
  
  match '/signup',  to: 'users#new'
  match '/signin',  to: 'sessions#new'
  match '/signout', to: 'sessions#destroy', via: :delete
 
  match '/help',    to: 'static_pages#help'
  match '/about',   to: 'static_pages#about'
  match '/jobs',    to: 'static_pages#jobs'
  match '/terms',   to: 'static_pages#terms'
  match '/privacy', to: 'static_pages#privacy'

end

Maybe you can help me. Thanks!

Hi guys, still have save url error with the latest Mercury version. Are there any solutions?

With mercury 0.9 the posted js didnt work for me anymore so I tried araound a bit... This works for me, maybe somebody needs this,...

jQuery(window).on('mercury:ready', function() {
        var saveUrl = $("#edit_link").data("save-url");
        Mercury.saveUrl = saveUrl;
});
Mercury.on('saved', function() {
        window.location.href = window.location.href.replace(/\/editor\//i, '/');
});

I'm trying to use the newer Mercury editor and it is not saving. If anyone can help I would appreciate it:

http://stackoverflow.com/questions/14366307/mercury-editor-0-9-0-cannot-save-changes-in-rails-3-2-11

starflyer59 -

I did get it to work with this javascript added to the end of mercury.js:

jQuery(window).on('mercury:ready', function() {
   var link = $('#edit_link');
   Mercury.saveUrl =link.attr('data-save-url');
   link.hide();
});

Could be my setup but Mercury is running 'onload' twice. i had to do one of these:

       var link = $('#mercury_iframe').contents().find('#edit_link');
         if (typeof link.data('save-url') != 'undefined') {
             console.log('only set saveUrl if it exists');
             Mercury.saveUrl = link.data('save-url');
         }
        console.log(Mercury.saveUrl); //<-- should be valid
        link.hide();

Saving works, but there is no redirect when saving. Anyone else having this issue?

Mercury.on('ready', function() {
    var link = $('#mercury_iframe').contents().find('#edit_link');
    console.log("mercury ready ready", link);
    Mercury.saveUrl = link.data('save-url');
    link.hide();
});

Mercury.on('saved', function() {
    window.location.href = window.location.href.replace(/\/editor\//i, '/');
});

please after every thing i was unable to edit my app content

Just want to point out the massive acronym typo in the description.
It's WYSIWYG as in "woh-zee-wig". What You See Is What You Get.

I can't for the life of me figure out what "WISYIWYG" could stand for...
Wild Industrial Skeletons. You and I Will Yell Greatly?

I don't know how to get the link of an image I upload in a page, with a data-mercury="image".

For example, i have this:
<div> id="page_content" data_mercury="full"></div>

I get it in the controller like this:
params[:content][:page_title][:value]

How to do with ?:
<img id="article_image" data-mercury="image">

Thank you

Following the screencast, but using 'head' instead of the commit used in the screencast, I get this:

$ rake mercury_engine:install:migrations
rake aborted!
Don't know how to build task 'mercury_engine:install:migrations'

(See full trace by running task with --trace)

Any suggestions on how to install the migrations?

Use *= stub mercury.css and //= stub mercury.js to exclude Mercury by default then include it explicitly on editable pages.

This has an advantage over removing the require_tree line in that all your javascript and css files will still be included without having to explicitly add them.

This is new to Sprockets 2.2.0 and up, I believe.

Great screencast, thanks Ryan.

Currently requirements for a markup are different from what is described in the screencast. Check the source code of the official demo page http://jejacks0n.github.io/mercury/

<div id="hero_content" contenteditable="true" style="overflow: auto;" data-mercury="full">
    <h1>Mercury Editor</h1>
</div>

Hey guys, is there anyone who can help me installing the mercury editor on _form.html.erb? I want to use it when writing articles for my blog.

Do mercury.js have to be in assets/javascripts?
remove //= require_tree . in application.js is the only way to prevent load it on all pages?

When i am running this command on rails 4:

rake mercury_engine:install:migrations

Then I am getting this exception:

rake aborted!
Don't know how to build task 'mercury_engine:install:migrations' (see --tasks)

Does anyone know how to solve it ?