如何在 designmode=on 中保护 HTML 元素答案

【问题标题】：How to protect an HTML element within designmode=on如何在 designmode=on 中保护 HTML 元素
【发布时间】：2012-05-28 08:47:40
【问题描述】：

我有一个打开了设计模式的 iFrame。在文档中，我有几个“特殊”元素，用户可以通过菜单选择粘贴这些元素（在更广泛的应用程序中使用的自定义字符/标识符/描述是固定的）。如果用户选择或删除它们，我需要保护这些 html 元素不被修改并将它们视为一个实体。一个示例 iframe 如下所示：

<iframe>
    <html dir="ltr">
        <head></head>
        <body class="editableDoc">
            <p>Here is a <span class="special readonly">SPECIAL</span> character</p>
        </body>
    </html>
</iframe>

设计模式可以根据我的需要编辑整个正文内容。

保护“只读”跨度的最佳方法是什么？我能给出的最好描述是，我希望跨度及其内容被视为所有用户文本操作（即移动光标、选择、删除）的单个字符。我已经尝试在 span 元素上设置 contenteditable="false"，这确实有很多想要的效果，但它在 IE8/9 中效果不佳，并且在其他浏览器中还有其他较小的问题。另外，我不确定在同一个解决方案中混合设计模式和 contenteditable 是否是个好主意。

【问题讨论】：

标签： javascript html iframe contenteditable designmode

【解决方案1】：

你可以像这样使用contentEditable=false：

<body contenteditable>
    <p>Here is a <span contenteditable='false'>SPECIAL</span> character</p>
</body>

无论它是否在 iframe 中，这都有效。它适用于 Chrome 和 Firefox——考虑到它没有前缀，可能也适用于最近的 IE。

演示地址：http://codepen.io/bfred-it/pen/bGhaC

这里有一个类似的问题：contenteditable=false inside contenteditable=true block is still editable in IE8

【讨论】：

【解决方案2】：

使用 user-modify CSS 属性的 read-only 值来保护 Firefox 和 Chrome 中的跨度：

<iframe src="about:blank" srcdoc="<body contenteditable><span style='-webkit-user-modify: read-only; -moz-user-modify: read-only;'>Hi</span></body>">
</iframe>

【讨论】：