HTML适用于不可编辑的岛屿

Question

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

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

我目前的方法如下:

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

在这种情况下,输入是不可编辑的,并且表现为固体块 - 正是我需要的.用户可以通过单击DEL或BACKSPACE作为任何其他字符等删除此类合并代码.通过为此类input.mergecode使用适当的CSS,我可以实现我想要的外观.

但是通过这种方法,我在三个不同的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>包含此类跨度的选择.

还有其他想法吗？

Answer 1

我是CKEditor开发人员.我们对嵌套的只读元素(即placeholder插件和我们目前正在处理的功能#9764)有一些经验,我没有好消息.如果您希望具有一致的外观,则必须手动处理每个行为.没有技巧可以修复浏览器.许多事情(就像在GC上输入时发生的奇怪事情一样)似乎无法解决.

Answer 2

另一个看起来很有希望的想法:

要使用空跨度::before { content:"caption"; },应该在DOM中将不可编辑的块表示为内部没有插入位置的节点.

但是这种方法并非没有问题(在我的情况下):没有办法::before使用样式 DOM属性声明内联,因此应该在CSS中预先声明整个集合.但是我拥有的一组合并代码非常大,在某些用例中甚至是未知的.叹.

尽管如此,如果某人有更好的情况(已知代码集),请将此配方放在此处.