HTML contenteditable 与不可编辑的岛屿

Question

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

Document-template 是一个带有一些特殊“合并代码占位符”的普通 html。这样的模板通过用来自数据库的数据替换这些占位符来“实例化”。这给出了最终文档 - 模板的一个实例。

我目前的做法是这样的:

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

(可玩的在线示例:http://jsfiddle.net/tFBKN/)

在这种情况下，输入不可编辑，并且表现为实心 block ——这正是我所需要的。 用户可以通过像任何其他字符一样单击 DEL 或 BACKSPACE 等来删除此类合并代码。通过为此类 input.mergecode 使用适当的 CSS，我能够实现我想要的外观。

但是通过这种方法，我在三个不同的 UA 中遇到了三个不同的问题:

• IE-CSS { font:inherit }那里根本不起作用，所以如果输入在 <b> 内喜欢这里 <b><input value="test"></b>它不继承任何字体样式。
• FF - 包含 <input> 的片段副本元素从剪贴板内容中删除该输入，因此进一步的粘贴操作会插入除输入之外的所有内容。
• GC - 在 <input> 之后立即点击 {BACKSPACE}产生奇怪的结果(bug)

所以我正在寻找其他关于如何在 HTML 中表示不可编辑的内联 block 的想法。

目前我尝试过的其他方法:

• <span contenteditable="false">MergeCode1</span> - 它不起作用，因为大多数 UA 从选择中删除了此类节点。所以不可能申请 <b>或 <i>在包含此类跨度的选择之上。

还有其他想法吗？

Answer 1

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