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.