問題タブ [rangy]

テキストを選択する場合、前の要素の最後から始まることもあれば、テキストノードの最初から始まることもあるなど、選択の開始と終了の正確な場所にいくつかのバリエーションがあります。これを正規化しようとしているので、常にテキストを含む要素の先頭から始まり、テキストを含む要素の最後で終わり、ブラウザ間で一貫性が保たれます。

例えば<b>mouse></b><i>cat</i>

「cat」を選択すると、chrome は常に正しいことを行い、startContainer cat と startOffset 0 で選択を返すように見えます。

これを修正する私の大まかな試みは成功しませんでした:

私は何が欠けていますか？

こんにちは、選択したテキストの後に div を追加することは可能ですか? jQuery または java-script と rangy js を使用

以下のコードを試してみましたが、動作しません..

選択したテキストに対して作成されたスパンタグなので、スパンタグ内の選択したテキストに div を追加する方法は?

私のコードは以下です：

出力:<span style="background-color: rgb(227, 246, 206);">release </span><div> </div> 私の div をスパンした後、

しかし、スパンタグ内でこのdivを作成する方法は? お気に入り

この動作は Chrome に固有のものです (執筆時点ではバージョン 26.0.1410.64 m ですが、しばらくの間発生していることはわかっています)。

次の HTML を見てください。

結果の ContentEditable Div で、キャレットを「中断」スパンの後に置きます。次に、バックスペースを使用して削除してみてください。これは不可能であることがわかります。

これを説明するjsfiddleを次に示します。

「中断」スパンの直後にテキストを入力すると問題が修正されることに注意してください。左矢印キーでスパンが終了した場所に戻り、通常どおりバックスペースを正常に戻すことができます。しかし、このテキストを削除するとすぐに、問題が再発します。

Span of は、私が使用している範囲および選択ライブラリであるRangydisplay: noneの不可欠な部分であるため、私にとって特に懸念事項です。Rangy を使用すると Spans が削除されないことがありますが、これが根本的な原因のようです。

互換性のためにRangyを使用して、WYSIWYGエディター(uEditor)内にノードを挿入しています。

動作しますが、IE < 9 では、挿入されたノードは、キャレット位置ではなく、含まれている要素 (iframe) の先頭に配置されます。これは、テキストが選択されていない場合にのみ発生します。

私はフィドルを作成しました。これは粗雑ですが、uEditor が使用する jquery/iframe ではなく div を使用しても同じ効果があります。

これがフィドルです：http://jsfiddle.net/RvNT3/

IE < 9 の場合: http://jsfiddle.net/RvNT3/embedded/result/

フィドルが実際のコードを代表するものではないことはわかっています。最終的にはブラウザに依存している可能性があります。しかし、それを機能させる方法（テキスト選択なしでキャレットに挿入する）があれば、それでうまくいくかもしれません。

フィドルコード:

私は現在、非常にクールな範囲と選択のライブラリである Rangy.js を実装しています。一部のテキストを強調表示し、強調表示にコメントを追加して保存できる関数を実装したいと考えています。デモでは、セレクションにメモを追加する方法が示されていますが、セレクションには ID のみが添付されています。

私は要素にコメントプロパティを作成するこのようなことを試みています:

そして、テキストを強調表示すると、コメントが「comment」プロパティに保存されます。

ハイライトを連載するとコメントが入りません。

誰かがRangy.jsでこれまたは似たようなことを試しましたか?

事前に感謝します。

webviewを使用して、Androidプロジェクトの1つでepubリーダー用の「ハイライター」を作成しようとしています。選択したテキストを取得するためにRangyを使用しています。以下のサンプル HTML からテキストを選択すると、シリアル化関数によってこの値が得られます。

これをDBに保存しています。ユーザーがこのページに戻ると、同じ選択を取得して逆シリアル化しようとしていますが、逆シリアル化関数は次のエラーをスローします。

なぜこれが起こっているのですか?? XPathを使用して同じことをしようとしていますが、それでも同じ問題です。

推測はありますか??

WebView で Android 用のHighlighterを作成しています。

強調する目的で、ある例ではJQueryとRangyを使用し、別の純粋なJavascriptとXPathを使用しています。デスクトップブラウザでも同じハイライトを試しています。

強調表示中に直面している問題について投稿した以前の質問を参照してください...

-->> XPath使用時の問題

-->> Rangy使用時の問題 (未解決!)

だから...これらの質問への回答から、私は次の結論に達しました

WebView にロードされた HTML の DOM 構造は一貫性がなく、デスクトップ ブラウザにロードされた同じ HTML ページの構造とは異なります。

この結論をサポートするために、jsFiddle (質問のリンク) を作成しました。しかし、WebView は DOM 構造を変更していない可能性もあると思いますが、div 内で正しくないTextNodesを確実に返します...

問題は、WebView の HTML の DOM 構造のこの変更を止める方法はありますか? 洞察力のある人はいますか？