HTML内容不可编辑的岛屿

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

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

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

<div contenteditable>
  Sample template with <input type=button class="mergecode" value="MergeCode1">.
</div>

(在线样本玩：http://jsfiddle.net/tFBKN/)

在这种情况下，输入不可编辑，并且表现为实体块 – 正是我需要的。
用户可以通过单击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>在包含这样的跨度的选择之上。

任何其他想法？

解决方法

我是CKEditor开发人员。我们有一些嵌套readonly元素的经验(即 placeholder插件和我们目前正在开发的功能 #9764)，我没有好消息。如果你想拥有一致的外观和感觉，你必须手动处理每一个行为。没有技巧会修复浏览器。许多事情(像这样在奇怪的事情发生在GC上的输入)似乎是无法解决的。