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

我有一个打开了设计模式的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=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 in contenteditable=true block在IE8中仍然可以编辑

使用 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>

相关内容

最新更新

热门标签：