我有一种基于浏览器的所见即所得的编辑器，用户可以在其中编辑文档模板。
文档模板是带有一些特殊的“合并代码占位符”的普通html。通过用来自DB的数据替换这些占位符，可以“实例化”此类模板。这给出了最终文档-模板的实例。
我目前的方法如下：
<div contenteditable>
Sample template with <input type=button class="mergecode" value="MergeCode1">.
</div>
（要与http://jsfiddle.net/tFBKN/一起玩的在线样本
在这种情况下，输入不可编辑，并且表现为坚固的块-正是我所需要的。用户可以通过单击DEL或BACKSPACE以及其他任何字符来删除此类合并代码，等等。通过为此类input.mergecode使用适当的CSS，我可以实现所需的外观。
但是通过这种方法，我在三个不同的UA中遇到了三个不同的问题：
{ font:inherit }根本无法在这里工作，因此，如果输入位于<b>内部，例如此处<b><input value="test"></b>，则它不会继承任何字体样式。<input>元素的片段的复制会从剪贴板内容中删除该输入，因此进一步的粘贴操作将插入所有内容，但不插入任何输入。<input>产生怪异结果（bug）后立即单击{BACKSPACE}因此，我正在寻找有关如何在HTML中表示不可编辑的内联块“岛”的其他想法。
到目前为止我尝试过的其他方法：
<span contenteditable="false">MergeCode1</span>-它不起作用，因为大多数UA将此类节点从选择中删除。因此，不可能在包含该跨度的选择上方应用<b>或<i>。还有其他想法吗？
我是CKEditor开发人员。我们对嵌套的只读元素（即placeholder插件和我们目前正在使用的功能placeholder）有一些经验，但我没有好消息。如果要保持一致的外观，就必须手动处理每种行为。没有任何技巧可以修复浏览器。而且很多事情（像是发生在GC输入周围的怪异事情）似乎是无法解决的。
另一个看起来很有希望的想法：
将空跨度与#9764一起使用，应生成以DOM表示的不可编辑块，作为内部没有插入符的节点。
您可以在这里尝试::before { content:"caption"; }
但是这种方法并非没有问题（以我为例）：无法使用style DOM属性内联声明http://jsfiddle.net/TwVzt/1/，因此应在CSS中预先声明整个集合。但是我拥有的合并代码集非常大，在某些用例中甚至完全未知。叹气。
不过，如果有人会遇到更好的情况（已知代码集），请把此食谱放在这里。
我知道它是一个旧线程，遇到了类似的问题。在可编辑div中只需要几个不可编辑的范围。最终实现了HACK-AROUND，例如...
::before完成$('#testDiv').on('keydown', function(e) {
var targetNode = getSelectionStart();
if(targetNode != undefined && targetNode.nodeType === 1 && targetNode.nodeName == 'SPAN')
{
var nodeHtmlString = targetNode.outerHTML;
if(~nodeHtmlString.indexOf("nonEditable"))
{
e.preventDefault();
e.stopPropagation();
}
}
});
function getSelectionStart() {
var node = document.getSelection().anchorNode;
return (node.nodeType == 3 ? node.parentNode : node);
}
的小提琴
下面的解决方案-提出一些警告。但是首先-你们真棒！我不是JS或HTML专家，但我也不了解jsfiddle.net。因此，阅读您的评论以及其他在线搜索，并在jsfiddle上进行了一些测试，我创建了以下有效的代码。
https://jsfiddle.net/fxmb3nL6/20/
如果将其放在chrome上的jsfiddle中，您会看到它在chrome（和IE和FF中起作用，但有所不同），但似乎有一个小警告。
注意事项是您的键绑定对Backspace的作用！就我而言，当我选择一个不可编辑的短语并按chrome中的退格键时，它似乎会刷新，或者执行“转到最后一页”！我将前两个不可编辑性设为红色（最后一个为黑色），以便您可以看到会发生什么。我在Chrome，FF和IE中的jsfiddle上对其进行了测试。所有人似乎都已采取适当措施，给予或拒绝了退格键问题。
而且我认为这是其工作原理的逻辑。第一个Div是顶级父级，它是contenteditable =“ false”。因此，其中的所有内容均不可编辑。除了其中跨度为contenteditble =“ true”的子级，它们将变为可编辑状态。因此，您是从父母那里继承的，但是您可以作为孩子覆盖。
我还把标签readonly =“ true” UNSELECTABLE =“ ON”，因为我在某些地方了解了它们。并进行了更多测试！！！请注意，我必须将Font ...置于跨度之外，否则它将无法正常工作。但是在IE中，它的工作原理非常完美。不可编辑的颜色是我告诉他们的颜色，并且单击，双击或三次单击都不会在jsfiddle中选择不可编辑！ :-)对于Chrome单击不执行任何操作，双击选择了不可编辑的内容，并使用退格键有点疯狂！似乎将转到上一页。有了FF，事情有点疯狂！双击之前选中的不可编辑的内容！不知道为什么。
[如果有人能找出并写出有关Chrome和FF的问题，那就太好了。双击或任意数量的快速单击也无法在Chrome和FF中使用会很好。我再次强调跨度...似乎必须在不可编辑的字体旁边...在跨度之外。
希望这一切都有道理。
这是我在项目中使用的解决方案：
<pre><code>
<div contenteditable="false" class="editor" readonly="true" UNSELECTABLE="ON">
Sample template with <span class="mergecode test1" />.
<span contenteditable> editable </span>
<font color=red><span UNSELECTABLE="ON" contenteditable="false" readonly="true"
UNSELECTABLE="ON"> uneditable1 </span></font>
<span contenteditable> editable2 </span>
<font color=red><span contenteditable=false readonly="true" UNSELECTABLE="ON"> uneditable3</span></font>
<span contenteditable> editable4 </span>
<span contenteditable="false" readonly="true" UNSELECTABLE="ON"> uneditable5 </span>
< /div>
</code></pre>
使用相应的CSS来查看结果：
<div>
<span contenteditable>Editable text</span> <span> - Non editable text</span>
</div>
这里是结果：div {
border: 1px solid black;
display: inline-block;
max-width: 200px;
}
对于IE，请尝试以下方法：
http://www.cssdesk.com/rULJM
请注意contenteditable属性的反向值！它违背了所有常识，但至少在IE8和IE9中有效。您可以移动并复制/粘贴此不可编辑的元素。但是，它远非完美。例如。如果您将包含不可编辑元素的区域加粗，这也会感染不可编辑元素的内容。因此，您可能必须使用一些脚本来保持元素的完整性。同时设置contenteditable =“ true”将使用调整大小手柄来装饰不可编辑的元素。您可以通过设置unselectable =“ on”再次将其关闭，但这将防止对象被拖动。同样，您可能必须依靠恢复宽度和高度的脚本。