如何防止 CSS `:before` 文本可编辑而 `div` 本身是可编辑的？

Question

我有一个可编辑的正文 div:

<body contenteditable="true">
    <div class="paragraph">Text</div>
<body/>

还有一个:before风格：

div.paragraph:before {
    content: "☑";
}

Fiddle: http://jsfiddle.net/uy9xs5p0/

在 Firefox 中，我可以将光标放在文本的开头，然后按退格键，复选标记就会被删除。如何预防？

Answer 1

您没有编辑 :before 内容。

一旦它变空，或者如果您在标记的开头退格，它只会删除整个 .paragraph 元素。

Answer 2

重现此问题时（例如，通过 this fiddle）开发人员工具显示 div.paragraph 已被删除。只剩下一个文本节点。

变成

要阻止删除 div，请不要提供其父项 contenteditable。改用这个：

<body>
    <div class="paragraph" contenteditable="true">Text</div>
</body>

Fiddle: http://jsfiddle.net/5y00q6ya/3/

Answer 3

你在父div中设置了contenteditable，因此擦除时，你正在删除div.paragraph，所以伪将消失。

请注意，如果您在子 div 中设置属性，则可以使其正常工作。

div.paragraph:before {
    content: "☑";
}

<div>
    <div contenteditable="true" class="paragraph">Text</div>
</div>

Answer 4

此问题的可能解决方法。这似乎按您希望的那样工作。

<div contenteditable="true" class="upper-div">
    <div class="paragraph">Text</div>
</div>

div.upper-div:before {
    content: "☑";
    display:inline-block;
}
.paragraph{display:inline-block;}

Answer 5

其他答案说明了问题。如果 div 从其父项继承其编辑能力，则可以删除子项 div 本身以及 div 之前的内容。

为了防止这种情况，有必要将可编辑的div 放置在可编辑的父级中。这使得有必要将每个可编辑的 div 放入不可编辑的父级 div 以保留可编辑的子级 div.

下面的例子展示了这一点

div.node {
    margin-left: 1em;
}

div.paragraph:before {
    content: "☑";
}

<div contenteditable="false" class="node">
    <div contenteditable="true" class="paragraph">Major</div>
    <div contenteditable="false" class="node">
        <div contenteditable="true" class="paragraph">Minor</div>
    </div>
</div>

如何防止 CSS `:before` 文本可编辑而 `div` 本身是可编辑的？

How to prevent the CSS `:before` text being editable while the `div` itself is editable?

css

firefox