Make text content inside an <a> tag editable with Mercury Editor

Question

I am using Mercury editor in a Rails4 application.

If you have something like:

<a href="http://www.google.com" data-mercury='full'>Edit me!</a>

It is very hard to manage to edit the content of this element because it activates the link when you click to edit it. You can trick it by selecting the text with the mouse (does not trigger the link) and then moving the cursor with the keyboard arrows, but this is not user-friendly.

Is there a way to tell Mercury to deactivate links when editing? For example, all <a> could be replaced with <span> when the editor is active. Since the tags themselves are not included in the editable content, we wouldn't need to revert then to <a> once we're done, we would just need to save modifications and reload the page.

Answer 1

I ended up implementing what I suggested above:

// CUSTOM CODE
// hide links so they can be edited
window.onload = function() {
  $('iframe#mercury_iframe').load(function() {
    $('iframe#mercury_iframe').contents().find('a').each(function() {
      $(this).removeAttr('href')
    });
  });
};

This targets the <a> tags in mercury's iframe and strips their href attribute so they are not clickable.

This snippet of code goes at the end of the app/assets/javascripts/mercury.js file.