問題タブ [rangy]

Rangyで蛍光ペンモジュールを使用しています。

いくつかのhtmlを持つdiv要素があります。htmlは実際にはajaxを使用してファイルからロードされます。このロードを行うボタンがあります。

テキストが読み込まれると、表示されているhtmlの一部を選択して、[ハイライト]ボタンを押すことができます。これにより、いくつかのRangyコードが呼び出され、必要に応じてテキストが強調表示されます...

複製するために、最初のハイライトの大部分を選択してください。

次に、[HTMLの読み込み]ボタンをクリックして、HTMLを再読み込みします。予想通り、ハイライトは消えました。しかし今、私は別のテキストを選択します。これは、私が行った最初のハイライトと重なっています。「ハイライト」ボタンを押すと、どういうわけかハイライトは前のハイライトのものになります。なぜこうなった？

マージと関係があるはずですが、その理由がわかりません。rangy.getSelection()JSをデバッグすると、（からの）選択が期待どおりであることがわかります。

これが問題のJSFiddleレプリケーションです

次のコードを使用して、範囲内にリンクを挿入しています。

選択したテキストを保存するためにボタンによって呼び出される次の関数があります。次に、リンク挿入用のテキスト入力を含む linkBar div を示します。

注意：テキスト入力内の入力テキストにフォーカスすると、選択が失われるため、toggleSelection の代わりに toggleRange() を使用しようとしています。

}

その後、前の関数で示された同じ div でボタンがクリックされると実行される次のコードがあります。

この関数は、次の関数を呼び出して、選択した範囲に linkApplier を適用します。しかし、それは機能しません

こことGoogleで検索と検索に結び付けましたが、 Rangy.jsまたはネイティブJSを使用して簡単に実行できるソリューションは見つかりませんでした。

次のようにコピーする単純な書式設定されたテキストがある場合..

プレーンテキスト (スタイル付きテキストなし) をcontenteditable要素にコピーして貼り付けるにはどうすればよいですか?

古いIEは気にしません。現在の Firefox または Chrome だけが動作する必要があります。

デモ: http://jsfiddle.net/72r6J/

私はRangyを使用して、Webサイトのテキスト強調表示機能を支援しています。つまり、ユーザーはテキストを選択し、（ボタンをクリックして）テキストを強調表示し、この方法で複数の強調表示を作成できます。

ハイライトはデータベースに保存され、将来いつでもユーザーはハイライトを再ロードできます。

ただし、restoreCharacterRanges「TextRange」モジュールの一部であるを使用すると、パフォーマンスの問題が発生します。ロードするハイライトが多いほど、このパフォーマンスの問題はさらに顕著になります。

現在、私は以下のようなコードを使用しています（ただ指摘するために、それは私が望むように正確に機能します、それはちょうど十分に速くありません）：

上記のコード例では、selection.restoreCharacterRanges通話中にパフォーマンスの問題が発生します。私のテストでは、実行に約0.6秒かかります。

さて、複数のハイライトをロードするとき、私はそれぞれに対してこの0.6秒のヒットを期待しており、これはすぐに合計される可能性があります。

複数のハイライトをより効率的にロードするためにできることはありますか？たぶん1回の呼び出しでrestoreCharacterRanges？

複数の選択を配列にプッシュしようとしましたselectionRangesが、呼び出しが行われたときにこれは望ましくない影響を与えるhighlightSelectionようです（つまり、最初の選択のみが強調表示されます）

私はAngularjsの使用を開始しましたが、コントローラー内でDOMの現在の状態を取得する必要があるという問題があります。基本的に、私はcontenteditablediv内にテキストエディタを構築しています。div内のテキストの改訂は、ユーザーが実際にフィールドに入力するだけでなく、外部サービス（サーバーからの長いポーリングプッシュ）から行うことができます。現在、サーバーからのリビジョンが角度モデルを操作しており、ng-bind-html-unsafeディレクティブを介してビューを更新しています。これに関する唯一の問題は、これがユーザーの現在のカーソル位置とテキスト選択を吹き飛ばすことです。

問題を回避する方法を見つけましたが、コントローラーのdom要素を直接操作する必要があります。これは角度がお勧めできないようです。現在の方法の検証か、より「角度のある」ものに関する推奨事項のいずれかを探しています。

基本的に、私が行ったことは、モデルに「contentChanging」と「contentChanged」の2つのイベントを追加したことです。1つ目はモデルを更新する直前に起動され、2つ目はモデルを更新した直後に起動されます。私のコントローラーでは、このようなイベントをサブスクライブします。

したがって、基本的に、コンテンツが変更されているときは、編集可能領域の現在のhtmlを取得します。次に、非表示のdom要素をドキュメントに挿入するrangyプラグインを使用して、ユーザーの現在の位置と選択をマークします。非表示のマーカーのないhtmlとマーカーのあるhtmlを取得し、googleのdiff_match_patchライブラリ（dmp）を使用してパッチを作成します。

コンテンツが変更されたら、scope。$ apply（）を呼び出してビューを更新します。次に、ビューから新しいテキストを取得し、以前のパッチを適用します。これにより、非表示のマーカーがhtmlに追加されます。最後に、範囲を使用して選択を復元します。

私が気に入らないのは、jqueryを使用してビューから現在のhtmlを取得し、パッチをビルドして適用する方法です。ユニットテストが少しトリッキーになり、気分が悪くなります。しかし、ランジーライブラリがどのように機能するかを考えると、それを行う別の方法を考えることはできません。

テキストの強調表示を行うためにRangyを使用しています。ユーザーがテキストの一部を選択し、ボタンをクリックすると、Rangy ハイライター モジュールを使用してテキストがハイライトされます。また、ユーザーがテキストの一部を検索できるようにしています。検索結果は、同じハイライター モジュールを使用して再び強調表示されます。ただし、検索結果には別のクラスを使用します。

これに関して私が抱えている問題は、ハイライト内に含まれるテキストを検索するときです。Rangy はあまりにも巧妙すぎて、私が望んでいた異なるクラスの 2 つのスパンを、複数のクラスを持つ 1 つのスパンにマージしています。問題ないように見えますが、問題は検索結果を「クリア」することにあります。これは現在、重なったハイライトも削除します。

結果の HTML に関しては、現在、次のようなものがあります。

しかし、私が欲しいのは、次のようなスパン結果内のスパンです。

この結果が得られるハイライターまたは css アプライヤを作成するときに使用できる設定はありますか?

次のコードを使用して、フォントを変更して contenteditable div のテキストを編集しています。定型化されたドロップダウン メニューである div をクリックすると、選択がクロムで消えます。Firefox、Opera、さらには IE でも問題なく動作します。

Rangy は、処理する選択されたテキストを見つけられません。なぜだろう！

注:「クリック」の代わりに「マウスオーバー」を使用すると問題なく動作します

人気の をダウンロードしましたRangy library。私は次のhtmlを持っています

これは私のjqueryコードです