Conflict between inline editing and progressive enhancement

Question

I have a Web Page with progressive enhancement - a script adds some formatting and elements to the page.

The page also allows inline editing.

Now here's my issue: in edit mode, the progressive enhancement script does its job and adds markup. Some of the markup goes in the areas that can be edited, so it gets saved when the user saves the page, which of course is not the wanted behavior.

What would be a clean way to make inline editing and progressive enhancement work on the same page?

Answer 1

You said your progressive enhancement script adds markup to highlight important content snippets but you don't want to save that automatically added markup. Here is a clean and efficient solution:

• Add some kind of taxonomy to the wrappers you need to strip before any saving, like a common class or hidden data attribute <span class="inline-highlighted-element"></span>.
• Create a blacklist with the identifiers (class names, data attributes) of the elements that should be eliminated before saves.
• In your inline editing system, create a sanitize function and use that blacklist to filter the content every time the user tries to save or update the content, then it will remove the automatic markup your enhancement script added.
• Possibly you will need to reproduce the sanitize function on your server side to make sure the content is really going to be filtered properly.

Answer 2

When starting inline editing, you could set the id of the div which is made contenteditable to a specific value, and modify the selectors in your progressive enhancement script not to select this div. (If you have more than one editable div, then you could set their class name.)

Answer 3

I'm a jQuery fanatic so I answer in jQuery.

<script>
    // before attaching your progressive enhancement
    // do this assuming this after your page loads
    $('selector-on-what-you-want-to-enhance').not('[contenteditable=true]').each(function(){
    // enhance away
    });
</script>