Search code examples
htmlcontenteditable

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?

Solution

  • One more idea that looks promising:

    To use empty span with ::before { content:"caption"; } that should produce non editable block represented in in DOM as a node having no caret positions inside.

    You can try it here http://jsfiddle.net/TwVzt/1/

    But this approach is not free of problems (in my case): There is no way to declare ::before inline using style DOM attribute and so the whole set should be declared in CSS upfront. But set of merge codes I have is pretty large, even unknown upfront in full in some use cases. Sigh.

    Nevertheless putting this recipe here if someone will have better circumstances (known set of codes).