如何在文本区域中模拟人工光标?

6
我想要做的事情类似于协同编辑器的工作方式。我希望两个人可以编辑同一份文件。为此,我需要模拟一个虚拟光标。我可以从文本框中提取另一个用户在指定位置进行添加和删除的操作。
然后我会将位置和动作传输到另一个文件中。我需要在发送的坐标处执行所需的更改。我已经找到了足够的方法来设置光标位置并在当前光标位置插入或删除文本,但问题是文档的光标移动到我进行更改的位置。
我不能让它这样,我想要有两个光标,每个用户一个。将它们彼此之间的更改传输到各自的文件中,并在它们各自的位置上进行更改,同时显示两个不同的光标。
我只需要知道是否有特定的库可以使用,甚至如果我必须自己制作,那么我该如何开始。我甚至不知道浏览器内部的文本框是如何表示的。如果我知道如何表示文本框中的位置,那么我就可以将位置保存在内存中,并根据接收到的输入进行更改。
我希望我的意思能被理解,感谢任何帮助。

1
不确定文本区域是否是一个好的起点;也许你可以在这个项目中滥用HTML5画布,然后最终将其转换为文本区域或文档格式,例如PDF或Word,其中我知道的这些格式都允许相对容易地在特定区域添加文本。 - Jake
但是如果我必须制作一个协作编辑器,我必须在文本区上工作。我相信如果我能找出文本区域内的位置是如何指定的,我就可以取得一些进展。我的意思是,如果我在打字时将插入符号放在位置x处,那么这个位置是如何描述的? - Sachin
这是关于字符数量的问题,不是吗?例如,如果x为24,则插入符号会在第24个字符处闪烁。对吧? - Jake
如果是这样的话,那我就麻烦了! - Sachin
你可以使用contenteditable进行操作,或者像Google Docs一样编写一个庞大的自定义框架来捕获按键等操作... - gengkev
我能否稍微研究一下,Google文档是如何实现的?这方面有没有文档记录? - Sachin
3个回答

4

1
很棒的文章,那篇Google的。看起来他们是通过在JavaScript中实现整个文档布局引擎来完成的。 - Paul D. Waite

2
您可以使用特殊字符来模拟插入符,并进行正则表达式以插入伴侣文本并移动其插入符,也可以使用真实的插入符。这是我能想到的最简单的设计。
为了理解,您可以使用管道符“|”作为人工插入符。但是这很容易与用户插入管道符冲突,为避免此类问题,您可以使用某种不常见的组合或找到一些Unicode字符来充当插入符。
一个真正的解决方案,但更加复杂,是不使用textarea,而是使用DIV。这意味着您需要处理所有键盘事件,并手动将按下的字符插入文档,并注册光标位置。但是这样,您可以插入任意数量的插入符,而不仅仅是2个,例如:<span class="caret1"></span>,您可以使其闪烁,使用CSS样式,为每个插入符设置不同的颜色等。

0

你尝试过来自Facebook的Draft.js吗?https://facebook.github.io/draft-js/

"Draft.js是一个基于React构建富文本编辑器的框架,由不可变模型驱动并抽象出跨浏览器差异。

Draft.js使得构建任何类型的富文本输入都变得容易,无论您只是想支持一些内联文本样式还是构建一个用于撰写长篇文章的复杂文本编辑器。

在Draft.js中,一切都是可定制的-我们提供构建块,以便您完全控制用户界面。"


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接