满意 - 编辑<code> element is inconsistent in Chrome

Question

I have a WYSIWYG Editor using contenteditable that allows users to insert "code snippets" using a <code> element. For instance:

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

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

In firefox, if you place the caret directly before the first character of <code>, it will prepend the element:

However, if you try to do the same thing in Chrome, it appends it to the previous element:

This means that if you use chrome, there is no way of adding content to the beginning of this element.

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

Answer 1

在这种情况下，Firefox具有出色的选择实现。如果使用箭头键从右向左移动它，可以将其放在内联元素（如<code>）内。如果从左向右移动它，它会粘在左边。这就是所谓的引力。

  

这里发生了什么？有没有办法让我的行为更加一致？

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

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

我可以为您提供有关如何使用CKEditor 5执行此操作的更多详细信息，但尚未准备好生产。我不知道如何与其他RTE一起做这件事，但我确实知道一件事 - 我从未试图在本地contentEditable上解决这个问题。