5

我想做的是类似于协作编辑器的工作方式。我想让两个人编辑同一个文档。为此,我必须模拟一个人工插入符号。我可以在文本区域的指定位置提取其他用户的添加和删除活动。

然后,我会将位置连同操作一起传输到另一个文档。我需要在发送的坐标处进行所需的更改。我已经搜索并找到了足够的方法来设置插入符号位置并在当前插入符号位置插入或删除文本,但问题是文档的插入符号移动到我进行更改的位置。

我不希望这样,我想要两个插入符号,两个用户各一个。将它们的更改传输到其他文档并在各自的位置进行更改,同时显示两个不同的插入符号。

我只需要知道我是否可以使用某些库,或者即使我必须自己制作它,那么我应该如何以及从哪里开始。我什至不知道 textarea 在浏览器中是如何表示的。如果我知道,我如何表征文本区域中的位置,然后我将位置保存在内存中并根据接收到的输入进行更改。

我希望我有道理,感谢您的帮助。

4

3 回答 3

4

你见过这个吗?

https://github.com/benjamn/kix-standalone/

这就是谷歌文档的做法:

https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html

于 2012-07-19T06:27:34.667 回答
2

您可以模仿具有特殊字符的插入符号并执行正则表达式来插入伙伴文本并移动他的插入符号,您可以使用真实的插入符号。这是我能想到的最简单的设计。为了得到这个想法,您可以将管道|用作人工插入符号。但这很容易与用户插入管道发生冲突,为避免这种情况,您可以使用某种不常见的组合,或者找到一些 unicode 字符作为插入符号。

一个真正的解决方案但更复杂的是不使用文本区域,而是使用 DIV。这意味着您需要处理所有按键事件并将手动按下的字符插入到文档中,并注册光标位置。但是通过这种方式,您可以插入您想要的插入符号数量,而不仅仅是 2 个,类似这样的东西,<span class="caret1"></span>您可以让它闪烁,使用 css 设置样式,为每个插入符号设置不同的颜色,等等。

于 2013-01-20T15:45:14.857 回答
0

您是否尝试过来自 facebook 的 Draft.js?https://facebook.github.io/draft-js/

“Draft.js 是一个在 React 中构建富文本编辑器的框架,由一个不可变的模型提供支持,并抽象了跨浏览器的差异。

Draft.js 可以轻松构建任何类型的富文本输入,无论您只是希望支持一些内联文本样式,还是构建复杂的文本编辑器来撰写长篇文章。

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

于 2016-07-05T14:32:17.527 回答