如何在具有 contentEditable 的容器中制作不可编辑元素？

Question

我正在尝试制作一个插入特殊类型元素的编辑器。我发现，如果您在其中的元素上将 contenteditable 设置为 false，它不会让您在其中键入内容（这很好），但它不会将光标放在任何一个之前或之后，光标就会消失。

有没有办法阻止用户在元素内键入内容，但在单击它时保留光标焦点，就像它是普通的文本符号一样？

div div {
  width: 30px;
  height: 30px;
  background: red;
  display: inline-block;
}

div {background: #ccc}

<div contenteditable="true">
this one will let you type<div></div>inside the red box
</div>

<div contenteditable="true">
this one wont, <div contenteditable="false"></div> but the cursor does nothing when you click inside it now
</div>


<div contenteditable="true">
cant place cursor after this box <div contenteditable="false"></div>
</div>

如果文本块是最后一个，您也无法单击该文本块的末尾。

可用性的大问题，真的很想解决这个问题。

Facebook已经解决了这个问题，但我不知道是用js还是css：

编辑：我发现fb将caret-color属性更改为黑色，但在您键入后它似乎跳转到span之外的位置，这必须使用js完成。还在想办法。

编辑：尝试了很多事情，以为我可以正常工作，但它仍然引起其他奇怪的问题。我建议您不要尝试这样做，而只使用图像元素或表情符号。

Answer 1

看起来该readonly属性是完成这项工作的工具，并且具有可接受的支持caniuse。

[contenteditable]:read-only {
  cursor: not-allowed;
}

css-tricks文章是合法的。