HTML contenteditable with non-editable islands
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 placeholders". Such template gets "instantiated" by replacing these placeholders by data coming from DB. This gives final document - an instance of the template.
My current approach looks like this:
<div contenteditable>
Sample template with <input type=button class="mergecode" value="MergeCode1">.
</div>
(Online sample to play with: http://jsfiddle.net/tFBKN/ )
The input is not editable in such case and behaves as a solid block - exactly what I need. Users can delete such merge codes by clicking DEL or BACKSPACE as any other characters, etc. By having proper CSS for such input.mergecode I am able to achieve look-n-feel I want.
But with such approach I have three different problems in three different UAs:
- IE - CSS
{ font:inherit }simply does not work there, so if the input is inside<b>like here<b><input value="test"></b>it does not inherit any font styles. - FF - Copy of fragment that contains
<input>element removes that input from clipboard content so further paste operation inserts everything but not inputs. - GC - Click on {BACKSPACE} immediately after the
<input>produces weird results (bug)
So I am looking for other ideas of how to represent non-editable inline-block alike "islands" in HTML.
Other approach that I've tried so far:
<span contenteditable="false">MergeCode1</span>- it does not work as most of UAs remove such node from selection. So it is not possible to, say, apply<b>or<i>on top of selection that contains such span.
Any other ideas?
Answer
I'm a CKEditor developer. We've got some experience with nested readonly elements (i.e. placeholder plugin and the feature we're working on currently #9764) and I don't have good news. You have to handle every behaviour manually if you want to have consistent look&feel. There are no tricks that will fix browsers. And many things (like this with weird things happening around input on GC) seem to be unsolvable.