3

我有一个打开了设计模式的 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 是一个好主意。

4

2 回答 2

4

你可以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

于 2013-11-27T01:56:50.680 回答
2

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

<iframe src="about:blank" srcdoc="<body contenteditable><span style='-webkit-user-modify: read-only; -moz-user-modify: read-only;'>Hi</span></body>">
</iframe>
于 2012-10-19T02:56:14.560 回答