HTML模板不可编辑区域,HTML内容不可编辑的岛屿

我有一种基于浏览器的WYSIWYG编辑器，用户可以在其中编辑文档模板。

文档模板是一个普通的html与一些特殊的“合并代码占位符”。这样的模板通过从DB中获取的数据替换这些占位符来“实例化”。这给出最终文档 – 模板的一个实例。

我目前的方法看起来像这样：

Sample template with .

在这种情况下，输入不可编辑，并且表现为实体块 – 正是我需要的。

用户可以通过单击DEL或BACKSPACE作为任何其他字符等来删除这样的合并代码。通过为这样的input.mergecode拥有适当的CSS，我可以实现我想要的look-n-feel。

但是通过这种方式，我在三个不同的UA中有三个不同的问题：

> IE – CSS {font：inherit}根本不起作用，因此如果输入位于< b>像这样< b>< input value =“test”>< / b>它不会继承任何字体样式。

> FF – 包含< input>的片段的副本元素从剪贴板内容中删除该输入，因此进一步的粘贴操作会插入所有内容而不是输入。

> GC – 在< input>之后立即点击{BACKSPACE}产生奇怪的结果(bug)

所以我正在寻找如何在HTML中表示不可编辑的内嵌块“岛”的其他想法。

到目前为止我已经尝试过的其他方法

>< span contenteditable =“false”> MergeCode1< / span> – 它不起作用，因为大多数UA从选择中删除这样的节点。所以说，应用< b>是不可能的。或者< i>在包含这样的跨度的选择之上。

任何其他想法？