HTML contenteditable with non-editable islands

Question

I have sort of browser based WYSIWYG editor where users can edit documents-templates.

Document-template is an ordinary html with some special \"merge code placeholde

Answer 1

For IE, try this out:

Uneditable

Note the reverse value of the contenteditable attribute! It defies all common sense, but it works - at least in IE8 and IE9. This uneditable element you can move around and copy/paste. It’s however far from perfect. E.g. if you bold a region that encompasses the uneditable element, this will infect the content of the uneditable element as well. So you’ll probably have to use some scripting to keep the sanity of the element. Also setting contenteditable="true" will decorate the uneditable element with resize handles. You can turn them off again by setting unselectable="on", but this will prevent the object from being dragged around. Again you’ll probably have to rely on a script restoring the width and height.