問題タブ [rangy]

私はこのjsFiddleで見せようとしたこの問題を抱えています。私はcontenteditableを持っています。これは単純なhtmlです-テキストと1つの<B>要素だけです。私の質問は、カレットが<B>要素の内側にあり、ユーザーが「X」キーを押したときの状況についてです。次に、<B>要素は正常にアンラップされますが、caretは位置を変更し、アンラップされた<B>要素の先頭に移動します。

カレットの位置を変えずにサモエの位置にとどめてほしい。出来ますか ？できればRangyライブラリを使用した解決策ですか？

この質問のために、コードは簡略化されています。

保存された範囲選択のmarkerId値を見つけようとしています。

私は次のことを試しました：

しかし、それは「未定義」を返します。マーカー変数を直接出力すると、項目として「markerId」を明確に持つオブジェクトが返されます。多次元オブジェクトの 3 次元に到達するのに問題があるようです。

これはどのように行うことができますか？

私は素晴らしいRangyライブラリを使用しています。また、HTML ノードを contenteditable DIV に挿入するために、Tim Down の関数も使用しています。

これで、Chrome で正常に動作し、期待どおりに動作するようになりました。ただし、FF と Opera では動作が異なります。Chrome では、HTML ノードは contenteditable に挿入され、キャレットはこの HTML ノードにとどまるため、ユーザーが入力を続けると、入力はすべて挿入された HTML ノード内に行われます。

Opera と Firefox では、キャレットは挿入された HTML ノードの外側に配置され、ユーザーが入力を続けると、入力された文字は HTML ノード内にはありません。

私のコードは、「Chrome の方法」で動作することを期待しています。FF と Opera で同じ動作を実現するのを手伝ってもらえますか?

テスト用の動作中の jsFiddle は次のとおりです: http://jsfiddle.net/Er5DH/2/ (contenteditable で「x」キーを押すと、赤色の SPAN 要素が挿入されます。Chrome では、入力を続けると、文字は赤色になります。ただし、FF と Opera では、「x」キーを押した後に次に入力する文字は黒くなります - 望ましくありません)

助けとヒントをありがとう。

別の要素の開始時に空の要素の前にノードを挿入しようとすると、この問題に気付きました (パイプ | はキャレット位置です)。これから始めます：

Range.insertNode() をRangy範囲で使用してテキストを貼り付けましたが、Chromeでは空の後に新しいノードが表示されるこの結果が表示されます<span>:

これではなく：

これは IE9 で正しく動作するように見えることに注意してください。挿入が<p>ノードの開始時に行われない場合、Chrome でも動作します。例:

結果:

これは単純化された例ですが、私が見ている問題を示しています。

明確にするために（そして、誰かが代替案を提案できる間違った方法でこれに近づいている場合）、テキストを挿入しようとしており、挿入が完了すると、新しく挿入されたテキストの最後に常にカーソルが表示されます。

例えば<p>|Original Text</p>、なる必要があります<p>INSERTED TEXT|Original Text</p>

ただし、ノードを挿入すると、挿入されたテキストの直前にキャレットが配置されます (これは、ノードを挿入するためのものであるとドキュメントに記載されているため、そこに不満はありません)。空<span>をマーカーとして使用して、挿入後にキャレット位置を復元しようとしています(実際、Rangyの選択保存および復元モジュールを使用してそれを実行しています)。

ある位置でノード/要素を分割するにはどうすればよいですか（選択）。

例私はこのマークアップを持っています：

（このパイプは位置/選択を表します）

私はそれを次のように変換したいと思います：

選択を維持します。

何か案は？

私はRangyライブラリとjQueryを使用していますが、該当する場合は生のJSを使用できます。

IFrame 選択範囲内のテキストを選択するために rangy を使用していますが、この選択範囲を表示するために IFrame をスクロールする必要がある場合があります。IFrame を選択したテキストに自動的にスクロールすることは可能ですか?

選択したテキストを H1 見出しと H2 の間で切り替えるために、Web ページに単純な 2 ボタン トグルを実装することを検討しています。SurroundContents メソッドはうまく機能しますが、既存の親タグ要素ノードを置き換えようとすると問題が発生します。私はこれを行うためにあらゆる種類の方法を試しましたが、あまり成功しませんでした。

基本的な機能は以下です。選択した同じテキストを使用して、これらの関数を次々に実行すると、次のような出力が得られます。

「テスト テキスト」のテキストを選択し、H1 オプションを選択した後: <h1>test text</h1>

同じテキストが再度選択され、今度は H2 オプションが押された場合:<h1><h2>test text</h2></h1>

これは問題なく、予想されることですが、見出し要素がネストされないように、元の親見出し要素を削除する方法を本当に探しています (たとえば、テキストは h1 または h2 ではなく、h1 または h2 で囲まれています)。両方）。私はparentNodeなどへのアクセスを実験しましたが、このアプローチを機能させることができませんでした。次のparentElementの提案Getting the parent node for selected text with rangy libraryを見てみましたが、変更された親要素をrangeでDOMに書き戻したり、DOMのどこにあるのかを判断する満足のいく方法を持っていませんでしたオブジェクトはそれを交換するためのものでした。それはすぐに扱いにくいアプローチになり、より良いオプションが必要になりました。

範囲の広い CssApplier モジュールがこの状況を処理できることは知っていますが、css ではなく実際の要素を操作する必要があります。

また、テキスト エディターの実装に rangy を使用する raptor エディターでは、見出しを適用するときにまったく同じ問題が発生することにも気付きました: http://www.raptor-editor.com/demo

この質問も関連していましたが、私が知る限り、この特定の要素の問題は execCommand では処理できません - Javascript: how to un-surroundContents range

親切に受け取った助けやアドバイス。

テキストを選択し、その選択したテキストを使用して取得するにはどうすればよいRangyですか？たとえば、Stack Overflowのようなテキストエディタを作成する場合、テキストの一部を選択してBボタンをクリックすると、そのテキストはテキストの前後にある2つのアスタリスクに置き換えられます。

基になるJavascriptは、選択されたテキストのオフセットをキャプチャし、そのテキストをアスタリスクで付加および追加し、前に選択されたテキストを置き換える新しいテキストを出力する必要があることを知っています。どうすればこれを達成できますか？ネイティブのDOM3setSelectionメソッドはいくつかの機能を提供しますが、これらはクロスブラウザーとの互換性が高くありませんが、Rangyクロスブラウザーです。残念ながら、Rangyのドキュメントはかなり貧弱です。

いくつかのクリーンアップ ロジックを備えた小さなインライン エディターを作成しました。したがって、Word ファイルから貼り付けると、すべての書式設定が削除されます。

私の問題は、たとえば 1 つの文を選択して貼り付けた場合、それが置き換えられないことです。これは cleanUp ロジックによるものです。ここで、range を使用して範囲を削除する方法を知る必要があるため、貼り付ける前にこの範囲を削除できます。

http://jsfiddle.net/eJNKy/3/

これはフォローアップの質問です。範囲を使用して iframe から選択したテキストを取得しようとしています。コードは iframe 以外のコンテンツに対して機能しているようです。rangy's docに従って、動作するはずです。

これがデモです：http://jsfiddle.net/codef0rmer/UuJ5G/