Databases
StackOverflow2013
Postsdbo
POHTML contenteditable with non-editable islands
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML contenteditable with non-editable islands
    text
    copied!<p>I have sort of browser based WYSIWYG editor where users can edit documents-templates.</p> <p>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.</p> <p>My current approach looks like this:</p> <pre><code>&lt;div contenteditable&gt; Sample template with &lt;input type=button class="mergecode" value="MergeCode1"&gt;. &lt;/div&gt; </code></pre> <p>(Online sample to play with: <a href="http://jsfiddle.net/tFBKN/">http://jsfiddle.net/tFBKN/</a> )</p> <p>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. </p> <p>But with such approach I have three different problems in three different UAs:</p> <ul> <li>IE - CSS <code>{ font:inherit }</code> simply does not work there, so if the input is inside <code>&lt;b&gt;</code> like here <code>&lt;b&gt;&lt;input value="test"&gt;&lt;/b&gt;</code> it does not inherit any font styles.</li> <li>FF - Copy of fragment that contains <code>&lt;input&gt;</code> element removes that input from clipboard content so further paste operation inserts everything but not inputs.</li> <li>GC - Click on {BACKSPACE} immediately after the <code>&lt;input&gt;</code> produces weird results (<a href="https://bugs.webkit.org/show_bug.cgi?id=107967">bug</a>) </li> </ul> <p>So I am looking for other ideas of how to represent non-editable inline-block alike "islands" in HTML.</p> <p>Other approach that I've tried so far:</p> <ul> <li><code>&lt;span contenteditable="false"&gt;MergeCode1&lt;/span&gt;</code> - it does not work as most of UAs remove such node from selection. So it is not possible to, say, apply <code>&lt;b&gt;</code> or <code>&lt;i&gt;</code> on top of selection that contains such span.</li> </ul> <p>Any other ideas?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload