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?

Well, good question... My immediate need is for a SharePoint wiki page, and I don't know how they do it. All I see is that it happens within a div whose attributes are changed in edit mode (contenteditable="true" class="ms-rte-layoutszone-inner-editable ms-rtestate-write" role="textbox") — Christophe, Dec 04 '11 at 03:12

score 1 · Answer 1 · answered Dec 04 '11 at 03:51

1

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.)

answered Dec 04 '11 at 03:51

kol

27,881
12
83
120

This doesn't work in my case, because inline editing could be activated after my progressive enhancement runs. – Christophe Dec 04 '11 at 04:06
When you start inline editing, you call some JS code. In addition to the above, you could extend this code to remove modifications from the editable div(s) added by previous progressive enhancement. – kol Dec 04 '11 at 04:38

marcio · Accepted Answer · 2011-12-04T03:27:32.747

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.

I don't have control on the inline editing system. But your answer helped me understand how it works. Thanks. — Christophe, Dec 08 '11 at 04:29

score 0 · Answer 3 · answered Dec 09 '11 at 23:34

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>

Conflict between inline editing and progressive enhancement

3 Answers3