时间戳

首页 > 解决方案 > 想要根据按键在多个内容可编辑的 div 之间移动光标

javascript - 想要根据按键在多个内容可编辑的 div 之间移动光标

问题描述

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

假设这是我需要的 html 输出。

你好


第一段


第二段

因此，在编辑器存储中，这些将存储为如下块：

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

在编辑器中，我将这些东西抽象化并允许用户以可视方式编辑内容，就像我们在文本编辑器中所做的那样，使用用户选择的标签上的 content-editable 属性。所以它本质上是一个所见即所得的类型编辑器。

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

例如，假设光标在段落中的第三个字符之后，并且用户单击向上箭头键，它应该转到标题第三个字符等等。

对不起，一个很长的问题和描述。提前感谢您的任何回复。

标签： javascripthtmlreactjs

解决方案

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

https://youtube.com/watch?v=feUYwoLhE_4

它提供了一种解决我们上面面临的问题的整体方法，以控制 React JS 中的内容可编辑。

推荐阅读