web-dev-qa-db-ja.com

JavaScript、テキスト注釈、アイデア

今しばらく考えていた問題について、他の人から意見を聞くのはとても興味深いです。

基本的に、ユーザーにテキストドキュメントを提示し、ユーザーがテキストを選択して注釈を付けることができるようにしたいと考えています。アノテーションに固有の私は以下を達成することを目指しています：

  1. ユーザーがテキストを選択して注釈を付け、後で参照できるように選択と注釈を保存できるようにする
  2. （UI）重複したアノテーションの表現をサポートします。たとえば、「これは私の例のテスト文のテスト文です」という文字列の場合、user1には「私の例のテスト文です」という注釈があり、user2には「私の例」の注釈があるとします。
  3. ドキュメントのテキストが変更される状況を考慮します。可能であれば、注釈は更新されます。

技術的な観点からこれにどのように取り組みますか？

私が持っているいくつかのアイデアは次のとおりです。

  • JavaScriptの範囲を使用し、注釈を整数のペアとして（document_start_char、document_end_char）のように保存します。このペアをデータベースに保存します。
  • または、JSを使用してテキストを選択し、実際にテキスト全体をデータベースに保存します。 （その後、重複する注釈をどのように行うかわかりません）
  • CSSスタイルを適用してテキストを強調表示し、重複するアノテーションの「スタック」を暗くして、重複したアノテーションを表現します。最小の注釈は常に「スタック」の一番上になければなりません。

あなたの考えや改善点は何ですか？どのようにheckは、すべての注釈を壊すことなくドキュメントのテキストの更新をサポートできますか？

web-developmentdesignjavascriptuser-interfacedocument
7
Mario Zigliotto

Open Knowledge Foundation Annotator [ http://okfn.org/projects/annotator/ ]でインスピレーション、JavaScriptライブラリ（GPLまたはMIT）+ couchdbバックエンド...を確認することをお勧めします。 co-ment.org、あなたが説明することを行うmarginalia

@trevor-Rangy [ https://github.com/timdown/rangy ]-クロスブラウザのJavaScript範囲と選択ライブラリ-IE範囲選択を解決する可能性があります問題-デモには開発中の位置（x、y）モジュールもあります。

2
martin

これに自分で取り組み、上記のOKFNアノテーターを使用します。正しく行うのは簡単ではなく、Annotatorは正しく行います。

https://github.com/okfn/annotator

変化するテキストの問題に関しては、重要ではありません。ニューヨークタイムズの賢い人は、この問題についてこのブログの投稿で説明しています。

http://open.blogs.nytimes.com/2011/01/11/emphasis-update-and-source/

幸運を。

0
Jamie Folsom

ここにあなたを始めるためのいくつかのコードがあります：

if (window.getSelection) {
    t = window.getSelection().toString();
} else if (document.getSelection) {
    t = document.getSelection().toString();
} else if (document.selection) {
    t = document.selection.createRange().text.toString();
}

これをマウスアップイベントに入れると、選択されているものすべてのtextを取得できます。私が過去に持っていた問題は、選択されたtextを取得できる一方で、テキストの「位置」を取得できないことですIEまたはテキストが含まれるノード。From quirksmode ：

Microsoft Text Rangeオブジェクトは文字列ベースであるため、他の2つのオブジェクトとは大きく異なります。実際、Text Rangeに含まれる文字列からDOMノードにジャンプするのは非常に困難です。

私はこれを回避するために、各文を異なるタグにして、マウスアップイベントとマウスダウンイベントが発生するスパンをキャプチャしています。次に、それらの範囲内でユーザーが選択したテキストを検索します。それはハックですが、私にはうまくいきました。機能しないのは、ユーザーがスパン内で複数回出現する単語または一連の単語を選択する場合です。したがって、各Wordでスパンを実行できると思います。

私はこの問題に1年ほど取り組んでいないため、状況が変わった可能性があり、おそらく私の解決策は最適ではありません。

ここにもいくつかの良いアイデアがあるようです：

https://stackoverflow.com/questions/2139616/window-getselection-gives-me-the-selected-text-but-i-want-the-html

オーバーラップに関しては、おそらくアノテーションのオーバーラップを示す何らかのマーカーが必要になるでしょう。ユーザーは、マーカーをクリックするか、マーカーにカーソルを合わせると、2つの注釈を確認できます。

0
Trevor