如何使用 contentEditable 在容器中制作不可编辑的元素？答案

【问题标题】：How to make non-editable element in a container with contentEditable?如何使用 contentEditable 在容器中制作不可编辑的元素？
【发布时间】：2019-11-07 19:26:40
【问题描述】：

我正在尝试制作一个可以插入特殊类型元素的编辑器。我发现如果你在其中的元素上将 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：

edit：我发现 fb 将 caret-color 属性更改为黑色，但是在您键入后它似乎会跳转到跨度之外的位置，这必须使用 js 完成。仍在尝试弄清楚如何。

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

【问题讨论】：

在 contenteditable="false" 时使用 java 脚本更改事件来禁用可编辑
只是将 contenteditable="false" 添加到他们已经拥有的内容中
@stackers 所以你想在点击红框本身时将光标放在红框之后？
@95faf8e76605e973 之前或之后，是的。单击 div 内的任意位置应该将光标放在某处，我只是希望它在我的元素之前或之后，而不是在其中。
之前曾为这个问题苦苦挣扎过，我可以告诉你，插入一个零宽度的空白将防止元素吞噬光标。但是，如果您想要任何类型的高级功能，您可能需要查看预构建的 contenteditable 库，这些库都旨在处理此类情况，因为 contenteditable 实现不一致：例如 ProseMirror 或 Quill。

标签： html css contenteditable

【解决方案1】：

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

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

css-tricks 文章合法。

【讨论】：

我会使用 not-allowed 光标来表示禁用状态。只读应使用 text 光标来指示复制文本 IMO 的能力。