問題タブ [rangy]

ユーザーが選択したテキストにクラスを適用できるようにする、rangy を使用した次のコードがあります。

ユーザーがテキストを選択してクラスを適用すると、コードは次のようになります。

最初に前のスパンタグを終了してから、新しいスパンタグを作成する方法が必要です:

rangy ライブラリには、これを行う方法が組み込まれていません。私は使用してみました：

と

しかし、それはうまくいきませんでした。

何か案は？

contenteditable ベースのリッチ テキスト エディターを使用しており、「インライン コメント」のアイデアを追加しています。

コメントをインラインで編集可能にし、トグルをクリックして折りたたむこともできます。

マークアップは次のようになります

また、コメントは `.inline-comment-control' をクリックして折りたたむことができます:

ここに簡単なjsfiddleがあります：http://jsfiddle.net/bJELv/

私の課題は、ユーザーがカーソルをコメントとバックスペースの右側 (または「削除」の反対側) に置くと、折りたたみトグルが削除されることです。

私がしたいのは、全体.inline-commentとそのすべての子がモノリシックに削除されることです。

そこで、バックスペースキーで何が削除されようとしているのかを知りたいです。

contenteditable DIV であるため、無数の動作が発生する可能性があるため、これは困難であることがわかっています。基本的に、ブラウザーが何をすべきかを決定するために使用するロジックを複製する必要があるようです (兄弟をマージする、親の前の兄弟の最後の子を削除するなど)。Rangy を使用して、選択の前に何があるかを判断しようとしましたが、マークアップが異なると複雑さが増すというエッジケースに遭遇し続けます (たとえば、コメントがタグ内にある、または同様のもの)。

バックスペース キーの動作を簡単に抽出する方法はないと確信しているので、別の質問としては、「スパンを離れたまま、span.inline-comment-control を削除しないようにするためのより良い方法はありますか?コメントは簡単に編集できますか？

または、ブラウザーが contenteditable のバックスペースで何をすべきかについての適切な説明があるので、JS で再現できますか?

私は、比較的新しいブラウザー (IE < 9 など) をターゲットにすることにのみ関心があり、jquery と rangy を使用しています。

SO を検索するのにかなりの時間を費やしましたが、多少関連する質問がいくつかありますが、この質問に直接関連するものは何も見つかりませんでした。

範囲の広い JavaScript コアとシリアライザーのコード ベース ( https://code.google.com/p/rangy/ ) を HTML ページに挿入しようとしています。ただし、注入すると、範囲の広いオブジェクトが正しく作成されません。モジュールは rangy.modules.* に追加されますが、モジュール内で作成された関数は rangy オブジェクトに追加されません。また、モジュールにはすべて、次の変数「initialized」および「supported」が false として含まれています。Rangy のコード ベースを自分の Web ページに適切に挿入できた人はいますか?

挿入するには - Chrome javascript コンソールを開き、コードを縮小して挿入します (非常に重要でないと機能しません - http://jscompress.com/ ):

javascript:ここにコードを挿入

ドキュメント内で選択したテキストが発生する場所の文字位置/文字数を取得しようとしています。

たとえば、私はやっています

これがドキュメントのどこにあるのかを文字数で把握し、停止開始文字の位置を保存する必要があります。選択したテキストは複数回出現する可能性があるため、indexof を実行しようとしても機能しません。選択したテキストが既にあるので、rangy からその情報を取得できることを望んでいました

助けてくれてありがとう

ランディ

pdf.jsを使用してレンダリングされたテキストの選択範囲のハイライトを作成するために rangy を使用しています。ハイライト表示の CSSspanは非常に単純です。

rangy の連続するハイライトは前のハイライトに依存しているため、spanrangy によって作成された高さと幅をコピーして、別のルート ノードに配置しようとしています。ただし、新しく作成された の幅がspan元の よりも大きいことに気付きましたspan。また、イライラするのは、明らかに異なるにもかかわらず、 Chrome が の両方spanのに対して同じ幅を報告することです!px

最初のspan(rangy によって作成された) 幅は、開発者ツールバーのauto下に表示されたときに Chrome によって報告されMetricsた幅ですが、2 番目のスパン (私が作成したもの) の幅は を介し​​て明示的に設定され$.widthます。

これが私がspanオーバーコピーしている方法です：

そして、幅が両方spanの s で同じであることを報告する Chrome の写真を次に示します。

ご覧のとおり、112px明らかに異なるにもかかわらず、幅が報告されています。なぜこうなった？

トピックで言及したように、マークされたテキストを保存し、フォーカスを失った後に復元できるプラグインを探しています。過去に使用したRangyというJSライブラリのように。そのようなプラグインはありますか、またはこの種の問題に対処する方法を知っている人はいますか?

エイドリアンについて

rangyスクリプトを使用して単純なjquery関数を実行していますが、機能させることができず、上記のエラーが表示されます。

Javascript:

Jsfiddle: http://jsfiddle.net/VmhMM/

contenteditable 内にいくつかの a 要素がありますdiv。キーボード キャレットを id で識別される特定の要素の最後に配置し、後でそれをdivusing Rangyの最後に移動するにはどうすればよいですか?

事前に感謝し、助けていただければ幸いです。

コンテンツ編集可能な div で使用される特別な機能のために、IE で Rangy ノードを作成しています。さまざまな文字、言語、および IME をすべて正しく処理できるようにするために、多くのキー処理コードが存在するように、可能な限りグローバルにしようとしています。if 文が入力される一連の「or」の中に 1 つの条件「e.charCode」を持つ関数に 1 つの if 文があります。IE では、charCode は定義されていませんが、ノルウェー語の文字 å (alt + 134) を入力した場合にのみ、その文字で charCode が実際に有効になります。これにより、すべてが破棄され、テキスト ボックス内の Rangy ノードが完全に削除され、それ以上入力しても応答しなくなります。

私の質問は、私が試した他のすべての ASCII 拡張文字と å 文字の動作が異なるのはなぜですか? また、この問題に似た、ゲルマン語について知っておくべき特別なケースは他にありますか?