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?
See Question&Answers more detail:os