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

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

javascript html iframe

Javascript 如何在designmode=on中保护HTML元素,javascript,html,iframe,contenteditable,designmode,Javascript,Html,Iframe,Contenteditable,Designmode,我有一个打开了设计模式的iFrame。在文档中，我有几个“特殊”元素，用户可以通过菜单选择粘贴这些元素（在更广泛的应用程序中使用的自定义字符/标识符/描述是固定的）。我需要保护这些html元素不受修改，如果用户选择选择或删除它们，则将它们视为单个实体。iframe示例如下所示： <iframe> <html dir="ltr"> <head></head> <body class="editableDo

我有一个打开了设计模式的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中效果不好，在其他浏览器中也有其他较小的问题。另外，我不确定在同一个解决方案中混合使用designmode和contenteditable是否是一个好主意。

使用

用户修改

CSS属性的

只读

值来保护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>

您可以像这样使用

contentEditable=false

：

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


这是一个特殊的角色

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

演示地点：

这里有一个类似的问题：