Easy Edit

by Justin Stayton | Last edited: 5/16/2011

While it's obvious when looking at a site what content needs to be edited, it's not always as straightforward finding that content in the backend. Is it a Link List? Or maybe a Section? Easy Edit solves this hunting game by placing edit links directly on the site for each piece of content that can be edited. Click on one of the edit links and be whisked right to the edit screen in the backend. It's really that easy.

How it Works

To begin, both monkcms.css and monkcms.js (or the jQuery-less monkcms-dev.js) must be included for Easy Edit to look and work properly. Combined with monkcms.php, these three files make the frontend magic happen. (monkcms.css and monkcms.js/monkcms-dev.js are no longer required for Easy Edit to work. monkcms.php now outputs the necessary CSS and JavaScript directly.)

Easy Edit is enabled by following the "Easy Edit" link in the backend. The site should appear with edit links (pencil icons) and a toggle for turning off Easy Edit.

The edit links are prepended to the output of each getContent() call that can be edited. For example, if a getContent() normally outputs a paragraph of text, the Easy Edit output will be:

<div class="mcms_easy_edit ... "> ... </div><p>Paragraph of text.</p>

The toggle in the top right corner of the site is added just before the closing </body> tag:

<div id="mcms_easy_edit_toggle" class=" ... "> ... </div></body>

A small amount of CSS and JavaScript is injected into the page as well (in the <head> and end of the <body>, respectively), to provide styling and added functionality. This is the extent of code added to the page.

When Easy Edit is turned off, the toggle flips, but still remains on the page. This removes the need to go through the backend to enable Easy Edit. Just load up the site, hit the toggle, and find the content to edit.

Bookmarklet

For those who work with multiple sites on a daily basis, drag the following link up to your bookmarks bar to create a bookmarklet that enables Easy Edit on a site without a toggle: Easy Edit

Here's the full JavaScript:

javascript: window.location = window.location.protocol + '//' + window.location.host + (window.location.port ? ':' + window.location.port : '') + window.location.pathname + (window.location.search ? window.location.search + '&' : '?') + 'easyEditOn' + window.location.hash;

Disabling, If Necessary

While the concept of Easy Edit is simple, the frontend magic that makes this happen is a bit more complex. Add in the myriad of ways that sites can be implemented on our system, and there are going to be instances where Easy Edit breaks the site. If this happens, let us know! There may be a workaround that we can build into the Easy Edit system.

That said, there may still be times when Easy Edit is better disabled. There is both a micro and a macro option:

  • Add a noedit parameter to the getContent() calls that just plain break, or specifically should not be edited. This will only disable Easy Edit for those specific pieces of content.
  • Turn Easy Edit off completely on the Edit Site screen in the backend.

Known Issues and Solutions

There are a number of known instances where Easy Edit can break a site:

  • Image rotators. Oftentimes, image rotators will use the pencil icon as the first slide, since the Easy Edit HTML is prepended to the actual HTML of the slides. Solution: Many image rotators allow the selection of slides to be explicitly specified. Ignore the Easy Edit HTML if possible.
  • PHP manipulation of a getContent() using noecho. We get it: Sometimes the need arises to tweak the string returned by a getContent() call. Solution: Take into account the possibility for Easy Edit HTML to be present, and ignore accordingly. Or add a noedit parameter to disable editing of that content.
  • JavaScript manipulation of the DOM. Particularly when traversing the DOM, the inserted Easy Edit HTML can unexpectadly take the place of the expected HTML. Solution: Again, take into account the possibility for Easy Edit HTML to be present, and ignore accordingly.
  • Redirect templates in PHP 4. In PHP 5, we're able to detect when a redirect template is being used and stop the injection of Easy Edit HTML. But not in PHP 4, sadly. Solution: Add a noedit parameter to the getContent(). Or, better yet, set the redirect URLs — whether external or internal — directly in the Navigation or Link Lists and get rid of redirect templates altogether!