問題タブ [rangy]

thisのフォローアップの質問です。iframe 内のテキストの選択をシリアル化し、それを復元したいのですが、「Uncaught Error: deserializeRange: checksums of serialized range root node (XXXXX) and target root node (XXXXX) do not match」というエラーが表示されます。

デモ: http://jsfiddle.net/codef0rmer/2d6Bk/1/

私は選択範囲についてRangy.jsで遊んでいますが、これまでのところ本当に気に入っています。選択範囲のテキストノードを特定のタグ内でラップし、ボタンをクリックするとこれを切り替えることを検討しています。私はcssClassApplierModuleを使用してうまく機能していますが、それを除いて（そして名前のために意味があります）、dom要素にそれ自体に適用するクラスも与える必要があります。

したがって、現在、範囲を選択して、たとえば強力なタグを適用すると、最終結果は次のようになります。

そして、私はそれをしたいです：

私がこれまでに持っているコードは次のとおりです。

渡されるcssクラスとして「text」の代わりに「」とnullを試しましたが、トグルしますが、トグルオフではなくなり、明らかに正しい解決策ではありません。

助けていただければ幸いです。ありがとう！

http://rangy.googlecode.com/svn/trunk/demos/core.htmlには、ユーザーが選択したコンテンツのHTMLを取得する方法を示すデモがあります。

ただし、最上位ノードから選択したコンテンツが属するノードまで、ノードの構造全体を取得したいと思います。このノード構造を取得するにはどうすればよいですか？たとえば、以下のサンプルコンテンツをご覧ください。

ここで、ユーザーが「ユーザーによって選択されたいくつかのサンプルテキスト...」というコンテンツのみを選択し、上記の例（「rangy」ライブラリを使用）を使用した場合、「いくつかのサンプルテキストユーザーによって選択されました...」は、そのライブラリによって選択されたHTMLとして表示されます-divとpの両方の情報も必要です...これを行うにはどうすればよいですか？私はjqueryを好みますが、純粋なjavascriptやその他のライブラリも問題ありません...

Rangyを使用して、リッチテキストエディター（designmode = "on"）でいくつかの操作を実行しています。これらの機能の1つは、ユーザーが事前に作成した特定の事前定義された文字を表すことができるフォーマットされたコンテンツを貼り付けることです。すべてのテキストコンテンツは段落要素で保持されます。ユーザーはこれから始めることができます：

ここで、パイプ（|）はキャレット位置です。次に、エディターのボタンを使用して「特殊」文字の1つを貼り付けることを選択し、最終的に次のようになります。

このアクションでは、Rangyを舞台裏で使用して、内部貼り付けプロセス中にキャレット（SelectionSaveRestoreModule）の位置を維持します。これは、エディターでテキストを後貼り付け処理する可能性があり、そうでない場合はカーソルの位置を台無しにする可能性があります。

<span>ただし、IE8では、無効な位置にするバグがあるように見えるため、キャレットを後に配置することはできません。その結果、カーソルは<span>要素の前に表示され、キーボードのカーソルコントロールでスパンの後にカーソルを移動することさえできません。実際、カーソルが次の段落に移動するのを防ぎます。

私は最近、いくつかのテクニックを試しました。たとえば、<span>sの後に余分な文字を配置して成功するなどです。ただし、これらの余分な文字は、表示されたときにユーザーに明らかに混乱を引き起こし、理想的ではありません。ゼロ幅スペースを使用する方が視覚的には優れていますが、貼り付け操作の後でそれらを整理しようとすると問題が発生します。

特殊文字に対するこのユーザー要件をサポートするための「整頓された」方法が必要であり、間違った方法でこれにアプローチしている可能性があることを自由に受け入れます。

Rangy を使用して、カーソル位置を選択および復元しています。

これは優れた機能を果たしますが、ユーザー入力がプログラムによって操作され、DIV の innerHTML で短い文字列が置き換えられる場合には設計されていません。

ユーザーが選択範囲の最後にスペースを入力し、スペースがプログラムで削除されるとどうなるかを示す jsbin の例を作成しました: http://jsbin.com/ebeqoj/4/edit

置き換えられた innerHTML は、Rangy が復元しようとするものよりも短いため、復元に失敗し、DIV がフォーカスを失います。

これを処理する方法についての提案をいただければ幸いです。たとえば、新しい文字列の末尾にカーソルを戻すように Rangy に指示する方法はありますか? （私は rangy.getSelection().move("character", userInput2.length-1)成功せずに使用しようとしました）

ありがとう

以下に、HTML ページのスニペットの例を示します---

ここでいくつかのシナリオがあります。上記のテキストを含む Web ページがブラウザに表示され、ユーザーがブラウザに表示されたテキストの一部を選択します。

シナリオ 1 --

ユーザーがテキストを選択

ウェブページで

シナリオ 2 --

ユーザーがテキストを選択

ウェブページで。

シナリオ 3 -- ユーザーが次のテキストを選択する テキスト 1 テキスト 1_1 テキスト 1_2 テキスト 2

シナリオ 4 -- ユーザーが次のテキストを選択

ここで、ユーザーがコンテンツ全体を選択した最上位ノードである Javascript を使用して取得したいと考えています。これは、シナリオ 1 の単一の div です。「div1_1」、シナリオ 2、つまり。「div1」とシナリオ 3 viz. ただし、シナリオ 4 では、div1_2 のコンテンツ全体と div2 のコンテンツ全体が選択されます。つまり、コンテンツが選択されたこれら 2 つの div は兄弟ではありません。したがって、シナリオ 4 で抽出したい結果は "div1_2" と "div2" です。

上記のようにdivを抽出するにはどうすればよいですか? ここで rangy の使用について言及しましたが、これは非常に便利で、標準の JS DOM を超える機能を備えていますが、JQuery や純粋な Javascript などの他の JS ライブラリを使用することもできます。

ここで追加/質問したいもう1つのこと... divのいずれかに画像やリンクがあり、ユーザーの選択にそれらの画像/リンクが含まれている場合でも、最上位のdivを抽出するにはどうすればよいですか?この div のテキスト コンテンツは、ユーザーが選択したテキストと同じですか (画像は無視でき、リンクのテキストは通常​​のテキストと共にユーザーが選択したもののみです)。

私は次のようなテキストを持っています

ここで、「テスト」を選択し、ページの斜体ボタンをクリックすると、新しい要素<span class="ItalicClass">とそれが作成されsurroundContents()ます。これはうまくいきます。

今、私は次のようなテキストを持っています

ここで「テスト」を選択した場合も同じですが、最初に親を閉じてから、新しい要素を挿入します。したがって、要素parentNodeに新しいクラスを挿入できることはわかっています。span同じように、新しい要素の終了後に同じ親を開く必要があります。最終行は

「もっと」という言葉を選択すると、

この点に関するポインタに感謝します。

ドミニクよろしく

ドキュメントで選択したテキストにクラスを追加しようとしています。問題は、ユーザーがページ上のすべてのテキストを選択できるようにしたくないことです (たとえば、コマンド + A を使用して...)。したがって、範囲からノードを削除したいのですが、方法がわかりませんそれをするために。このページには多くのテキスト/ネストされた div があるため、追加されたクラスを使用して選択可能な要素にあるかどうかを確認すると、非常に時間がかかり/遅くなります。

もう少しうまくやろうとしていることを説明するためにフィドルを作りました。 http://jsfiddle.net/thomasjonas/BhKFt/20/

この例ですべてのテキストを選択すると、クラスがすべての div に追加されます。「はい」クラスのdivにのみcssを適用したい。これに対する、ブラウザがクラッシュしない優れた解決策はありますか?

前もって感謝します！

私は rangy を使用しており、HTML を挿入できるように、ユーザーの選択を保存して後で復元できる contenteditable div のケースがあります。

私の問題は、ユーザーがヘッダー要素内で選択した場合、ヘッダー内に html を挿入したくないということです。

そのため、ヘッダー内で選択が行われた場合にヘッダー要素の前に移動できるように、rangyの使用方法を理解しようとしています。

したがって、ユーザーが h1 内で選択した場合:

次に、保存された選択範囲が h1 の前に移動されます。

選択境界を移動できるかどうかを確認するために、次のことを試しました。

しかし、H1 内で選択すると、保存された選択境界が H1 内に設定され、その前には設定されません。ヘッダー要素の前に境界を移動する方法がわかりません。