問題タブ [rangy]

、、、などのいくつかのタイプの HTML 要素を含めることができ<div />ます。contenteditable<span /><a /><b /><u />

でテキストを選択するとcontenteditable、選択範囲内のすべてのスタイルを削除するボタンが必要になります。

例 1:

選択:

次のようになります。

例 2:

選択:

次のようになります。

あなたはアイデアを得る...

現在の選択をカスタムテキストに置き換えるこの便利な機能https://stackoverflow.com/a/3997896/1503476を見つけました。しかし、最初に選択範囲のコンテンツを取得して、タグを削除してから置き換えることはできません。どうやってやるの？

正しい範囲オブジェクトを取得できない理由がわかりません。問題を説明するのは難しいです。

例：5つのdivがあり、各divにはフレーズが含まれています。論理的にmousedownは、これらのdivのいずれかでイベントをトリガーすると、イベントターゲットを取得できます。わかりました、これは初歩です。

ただし、イベントで範囲オブジェクトを操作するmousedown場合、イベントターゲットは常にクリックしたものですが、range.startContainerは前のdivを指しています。

このフィドルをチェックしてください：

問題を再現するための手順（コンソールを参照）：

1. 最初の行でマウスボタンを押したままにします（コンソールは「undefined」と言います[*]）
2. マウスボタンを離します（範囲は安全に最初の行を指しています）
3. 4行目でマウスボタンを押したままにします（コンソールは「firstline」と言います）
4. コンソールには、前にクリックした行が表示されます

[*] ドキュメントにまだ範囲がないため未定義ですが、その場で作成してドキュメントに挿入できるため、これは重要ではありません。

範囲の前にmousedownイベントが実行されたと推測できます。

次のような属性で<a />タグを設定する方法を知っています：hrefcontenteditable

その結果、

nameただし、の代わりにアンカーを設定する方法がわかりませんhref。
これは私の望ましい結果です：

誰でも私を助けることができますか？

補足:私は jQuery と Rangy をライブラリとして使用していますが、execCommand と直接連携するソリューションが望ましいと考えています。

更新:ここに jsfiddle があります: http://jsfiddle.net/fjYHr/テキストを選択してボタンをクリックします。私が望むのは、ボタンをクリックすると、href の代わりに name 属性が設定されたリンクが挿入されることだけです。

動的 Web ページの範囲を介して選択を保存しています。しかし、ページをリロードして選択を復元すると、次のエラーが発生します。

エラー: deserializeRange: シリアル化された範囲ルート ノード (f3909155) とターゲット ルート ノード (c21b08a9) のチェックサムが一致しません

ページのソースはまったく変更されておらず、すべての HTML は同じです。Tikiwiki CMS を使用しています。これについてのアイデアはありますか？

私のコード:

しかし、私が電話するとき

常に同じ id プロパティでスパンをレンダリングします。id プロパティを動的に設定するにはどうすればよいですか?

highlighter.highlightSelection関数(マークタイプ)で作成されたアノテーションの数が増えると、なぜ rangy がより遅くなるのですか? パフォーマンスは最初は非常に優れていますが、注釈が大きくなるにつれて低下します。

では、関数のパフォーマンスを向上させるにはどうすればよいhighlighter.highlightSelection()ですか? HTMLのさまざまな部分を選択すると、パフォーマンスが指数関数的に悪化するためです。非常に長い html のフラグメントを選択すると、パフォーマンスが最悪になります。これを修正しようとしましたが、方法がわかりませんでした。

なぜこれが起こるのか知っている人はいますか？

私はrangyと協力していて、選択とそのクロスブラウザの動作に関する質問を受けました。

div内にいくつかの要素（ハイパーリンクなど）があり、この要素内をクリックしたときにouterHTMLを選択できるようにしたいと思います。

そこで、ハイパーリンクのouterHTMLが得られるrange.selectNode()ように、ノード全体が選択されることを期待しました。selection.toHtml()innerHTMLを取得するには、を呼び出しますrange.selectNodeContents()。そして、これがIE9での動作です。

ただし、Chromeではどちらの場合もinnerHTMLのみが選択されています。rangyプラグイン（クロスブラウザである必要があります）にバグがありますか、それとも何か間違ったことをしていますか？

このフィドルをチェックして、私が何を意味するかを確認してください。最初にIE9で開き、ハイパーリンク内にキャレットを配置し、最初のボタンをクリックします（の出力を確認してくださいselection.toHtml()）。次に、ハイパーリンク内にもう一度キャレットを配置し、2番目のボタンをクリックします（出力をもう一度確認します）。その後、Chromeでも同じようにします。

私がやりたいこと ：

->プレーンなHTMLページをユーザーに表示する->ユーザーはそのページのテキストを強調表示することができます->ユーザーが次回ログインしたときに、ページ上の以前の（複数の）強調表示を取得して表示できるはずです。

私がしたこと ：

Library / API：Rangyを使用しました。このiamを使用すると、テキストを選択して、ユーザーの好みの色で強調表示できます。

問題 ：

シリアル化および逆シリアル化機能を試しましたが、（ページがリロードされた後に）逆シリアル化しようとすると、次のようなエラーが発生します。

シリアル化された範囲のルートノード（ec0c8cf0）とターゲットルートノード（d4997863）のチェックサムが一致しません

ページをリロードするたびに、新しいルートノードがあります。この場合、逆シリアル化を修正するにはどうすればよいですか？

JS-Fiddleを作成しました：demo / js-fiddle

これは何ですか-デモを確認すると、説明の最初の単語、つまり「お願いします」を選択します。テキストが強調表示され、シリアルも次のように表示されます。

0/3/1/3/0/1/1/2：9,0 / 3/1/3/0/1/1/2：9 {b3002d92}

だから私がしたことは、このシリアルをハードコーディングして、このようなページonLoad関数のdeserializeSelection関数に入れました：-

技術的には、ページが読み込まれるたびに、説明の中で「お願いします」を強調表示する必要があります。ただし、そうではありません。代わりに、上記のエラーをブロックで表示します。これを解決するのを手伝ってくれませんか。お願いします。ありがとう

追加：

1.私はrangyのシリアル化と逆シリアル化の方法を本当に理解していません。

2.ここからの私の非常に抽象的なロードマップは、ページのロード時にAJAX呼び出しを実行し、データベースからこのページのユーザーのすべての（シリアル化された）選択をフェッチし、それらを反復処理して逆シリアル化することです。

どんな助けでも、本当にありがたいです。ありがとうございました。

Rangyで利用可能な蛍光ペンモジュールを使用していますが、選択したテキストの蛍光ペンを作成するのに最適です。

htmlの変更に関しては、選択したテキストは、たとえば次のようなスパンタグに置き換えられます。

私がやりたいのは、作成されたspan要素への参照を取得して、他の処理を実行できるようにすることです。これはどのように行うことができますか？

他の場所にハイライトタグの有無にかかわらず他のスパンがある可能性があるため、これらを使用してそれを見つけることはできないことに注意してください。

選択したテキストのハイライトを作成する必要があるコードの重要な部分は次のとおりです。