javascript - Contenteditable - 在 Chrome 中编辑 元素不一致

Question

我有一个使用 contenteditable 的所见即所得编辑器，允许用户使用 <code> 插入“代码片段”元素。例如:

<div contenteditable="true">
    <p>
        This is a paragraph with an <code>inline snippet</code>!
    </p>
</div>

https://jsfiddle.net/wyeack/pyta77zd/2/

在 firefox 中，如果将插入符号直接放在 <code> 的第一个字符之前, 它会在元素前面加上:

但是，如果您尝试在 Chrome 中做同样的事情，它会将它附加到前一个元素:

这意味着如果您使用 chrome，则无法将内容添加到此元素的开头。

这是怎么回事？有没有办法让我的行为更加一致？

Answer 1

Firefox 在这种情况下有更好的选择实现。您可以将它放在内联元素中，例如 <code>如果您使用箭头键将其从右向左移动。如果你从左向右移动它，它会粘在左边。这就是所谓的重力。

What's going on here? Is there a way for me to make the behavior more consistent?

首先——不要使用裸contentEditable .使用良好的 RTE。

第二个(也是最后一个:P)——我不知道有任何 RTE 可以使这种特定行为正常化。这是一件代价高昂的事情，很少有用户会注意到它。不过，这是可能的，但您需要使用具有适当数据模型的 RTE(其中选择被完全抽象化并且所有输入被拦截)并基于该模型相应地处理输入。

我可以为您提供有关如何使用 CKEditor 5 进行操作的更多详细信息，但尚未准备好生产。我不知道如何使用其他 RTE 来做到这一点，但我可以肯定地知道一件事——我从来没有尝试在 native 上修复此问题 contentEditable .