如何在textarea中模拟人造插入符?

时间:2012-05-28 07:56:41

标签: javascript jquery textarea caret

我想要做的是与协作编辑器的工作方式类似。我想允许两个人编辑同一个文档。为此,我必须模拟人造插入符号。我可以在textarea中的指定位置添加和删除其他用户的活动。

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

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

我只需要知道我是否可以使用某些库,或者即使我必须自己创建这些库,然后我将如何以及从何处开始。我甚至不知道如何在浏览器中表示textarea。我如何表征textarea中的位置,如果我知道然后我将位置保存在内存中并根据收到的输入进行更改。

我希望我有意义,谢谢你的帮助。

3 个答案:

答案 0 :(得分:3)

答案 1 :(得分:1)

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

一个真正的解决方案,但更复杂的方法是不使用textarea,并使用DIV。这意味着您需要处理所有键事件并将手动按下的字符插入文档,并注册光标位置。但是通过这种方式你可以插入你想要的多少插入符号而不仅仅是2,像这样<span class="caret1"></span>你可以使它闪烁,用css设置风格,每个插入符都有不同的颜色等等。

答案 2 :(得分:0)

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

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

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

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