5

私がやろうとしているのは、コラボレーティブエディタの動作に似ています。2人で同じドキュメントを編集できるようにしたい。そしてこのために、私は人工のカレットをシミュレートする必要があります。テキストエリアの指定された場所で、追加と削除の観点から他のユーザーのアクティビティを抽出できます。

次に、場所とアクションを他のドキュメントに送信します。そこで、送信された座標で必要な変更を実行する必要があります。キャレットの場所を設定し、現在のキャレットの場所でテキストを挿入または削除するのに十分な方法を検索して見つけましたが、問題は、ドキュメントのキャレットが変更を加えた場所に移動することです。

私はそれを望んでいません。2人のユーザーにそれぞれ1つずつ、2つのキャレットを用意したいと思います。2つの異なるキャレットを表示しながら、変更を相互に送信し、それぞれの場所で変更を加えます。

使用できる特定のライブラリがあるかどうか、または自分でこれを作成する必要がある場合でも、どのように、どこから始めればよいかを知る必要があります。ブラウザ内でテキストエリアがどのように表現されているのかさえわかりません。テキストエリア内の場所をどのように特徴付けることができますか？それがわかっている場合は、場所をメモリに保存し、受け取った入力に基づいて変更を加えます。

助けてくれてありがとう、私は理にかなっていると思います。

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 に答える