我有一种基于浏览器的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上的输入)似乎是无法解决的。
