2012-05-28 4 views
5

私がやっていることは、コラボレーティブエディタの仕組みと似たものです。 2人で同じ文書を編集できるようにしたい。そして、私は人工的なキャレットをシミュレートする必要があります。私は、テキストエリアの指定された場所で、追加や削除という言葉で他のユーザーの活動を抽出することができます。テキストエリアで人工的なキャレットをシミュレートする方法は?

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

私はそれを望んでいません、私は2人のユーザのためにそれぞれ2つのキャレットを持ちたいと思います。 2つの異なるキャレットを表示しながら、それぞれのドキュメントに変更を送信し、それぞれの場所で変更を加えます。

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

私は感謝したい、助けてくれてありがとう。

+1

テキストエリアが適切な開始点であるかどうかは不明です。おそらく、あなたはこのプロジェクトのHTML5 Canvasを悪用し、最後に何らかの形でテキストエリアやdocフォーマットに変換することができます。私が知っているものの中のPDFやWordは、テキストを比較的簡単に特定の領域に追加することができます。 – Jake

+0

しかし、私が共同編集者を作っていなければ、テキストエリアで作業する必要があります。私は、テキスト領域内のどのように位置が指定されているかを知ることができれば、いくらか進歩すると信じています。つまり、入力時にxの位置にキャレットがある場合、この位置がどのような位置に記述されているのですか? – Sachin

+0

文字数の点ではありますか?例えば。 xが24の場合、キャレットは24番目の文字で点滅します。いいえ? – Jake

答えて

3

あなたがこれを確認しましたか?

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

これは、Googleドキュメントは、それをしない方法です:あなたは特別な文字でキャレットを模倣し、パートナーのテキストを挿入し、彼のキャレットを移動するために正規表現を行うことができ

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

+0

偉大な記事は、Googleのもの。 * JavaScriptでドキュメントレイアウトエンジン*を実装する*ように見えます。 –

1

、およびあなたは本当のものを使うことができます。これは私が考えることができる最もシンプルなデザインです。 アイデアを入手するには、パイプ|を人工的なキャレットとして使用できます。これはユーザーがパイプを挿入することと容易に矛盾します。これを回避するために、珍しい組み合わせを使用するか、キャレットとして動作するUnicode文字を見つけることができます。

本当の解決策ですが、より複雑な方法はテキストエリアを使用せず、DIVを使用します。これは、すべてのキーイベントを処理し、手動で文書に押された文字を挿入し、カーソル位置を登録する必要があることを意味します。しかし、この方法では、2だけではなく、いくつかのキャレットを挿入することができます。<span class="caret1"></span>あなたはそれを点滅させたり、CSSでスタイルしたり、キャレットごとに異なる色をつけることができます。

0

Draft.jsを試しましたか?フェイスブック ? https://facebook.github.io/draft-js/

「Draft.jsが反応でリッチテキストエディタを構築するためのフレームワーク、不変モデルを搭載し、クロスブラウザの違いの上に抽象化である。

Draft.jsは、リッチテキストの入力のいずれかのタイプを構築することが容易になりますいくつかのインラインテキストスタイルをサポートするか、ロングフォーム記事を作成するための複雑なテキストエディタを作成するかのいずれかを選択することができます。

Draft.jsではすべてがカスタマイズ可能です。ユーザーインターフェイスを制御します。

関連する問題