Javascript 要根据按键在多个内容可编辑div上移动光标吗

因此，我正在构建一个基于块的文本编辑器，其中我们输入的每个元素都是一个块。例如，如果我们将以下内容作为内容输入：

假设这是我需要的html输出

Hello There

First Paragraph

Second paragraph

在编辑器中，我对这些内容进行了抽象，并允许用户可视化地编辑内容，就像我们在文本编辑器中所做的那样，在用户选择的标记上使用content editable属性。因此，它本质上是一个所见即所得类型编辑器

现在我面临的问题是，就像我们在任何编辑器中遍历内容一样，使用箭头键（尤其是上下箭头键）并不是由浏览器本机处理的，因为元素在物理上彼此不同。所以，我如何在点击键盘按钮（上下）时，以编程方式导航光标，让用户感觉它没有使用任何新系统，而只是使用另一个文本编辑器。 我尝试过使用窗口选择API，目前我只能从一个块遍历到另一个块（比如从第1段到标题），但位置可以设置为开始或结束，我无法找到如何将其设置为其所在的确切位置

例如，假设光标位于段落的第三个字符之后，用户单击向上箭头键，它应该转到第三个字符的标题，依此类推

---

很抱歉提出了一个很长的问题和描述。提前感谢您的回复

由于时间限制，我不得不放弃该功能，但我确实找到了一个可行的方向。这是一段解释Draft.js（由Facebook团队创建）背后的工作和理念的视频

---

它为我们解决上述问题提供了一条全面的途径，要在React JS中控制可编辑的内容。

您不能将所有元素添加到

contentEditable

父级吗？您不能跟踪光标在每个按键上的位置，这样当您从一个块移动到另一个块时，您就知道要转到哪个位置了吗？感谢@Prawinsoni的建议，我会试试看它是否管用。你知道怎么做吗？嘿@SpiritOfDragon，由于时间的关系，我不得不放弃这个功能，但确实找到了一个可行的方向。这是一段解释Draft.js（由Facebook团队构建）背后的工作和理念的视频

[
    {
        "type": "text",
        "content": "Hello There",
        "element": "h1"
    },
    {
        "type": "text",
        "content": "First Paragraph",
        "element": "p"
    },
    {
        "type": "text",
        "content": "Second Paragraph",
        "element": "p"
    }
]