5

javascriptを使用して選択の終了を検出し、終了位置にマーカーを配置するコードを作成しました。このjsfiddleを参照してください：http：//jsfiddle.net/vCwwN/

上記のコードは次のことを行います。

  • すべてのLTRスクリプト（英語など）を適切に処理します（最後にマーカーを正しく表示します）。
  • LTRスクリプト（英語など）の場合選択が前方（左/上から右/下）または後方（右/下から左/上）のどちらであるかを処理し、選択が停止した場所のマーカーを適切に表示します（マウスまたはキーボードを使用） 。
  • これはgetClientRects、すべての選択長方形の境界を見つけるために使用し、選択の方向を検出するためのハック（後方かどうか）を使用します。これらの2つの情報に応じて、マーカーを最後に配置します。

上記の英語のスクリプトを問題なく選択してみてください。唯一の問題は、RTLスクリプト（アラビア語など）を処理しようとすると、マーカーが、選択したRTLスクリプトの最後（マウス/キーボードが実際に停止した場所）ではなく、最初に表示されることです。これらは問題を引き起こします：

  • RTLスクリプト（アラビア語）内で選択を開始し、RTLスクリプト（アラビア語）内で選択を終了します。これにより、選択の開始時にマーカーが表示されます。
  • LTRスクリプト（英語）内で選択を開始し、RTL（アラビア語）スクリプト内で選択を終了します。これは、RTLスクリプト選択の開始時（終了時ではなく）にマーカーを表示します。

基本的に、どこからでも（LTRまたはRTL）開始し、RTLスクリプトで終了する選択は正しくありません。その他の場合は正しく処理されます（たとえば、LTRまたはRTLで開始し、途中でRTLスクリプトを渡す場合でもLTRで終了します）。

問題は、RTLスクリプトでは流れの方向が反転しているため、後方が前方に、前方が後方になっていることです。これが私のコードがRTLを適切に処理できず、後方ハックが逆になっている理由です。

私が考えた解決策の1つは、選択範囲の最後の文字を検出し、RTLスクリプトがあるかどうかを確認し、これに基づいて後方フラグを反転することです。テキストがRTL文字で終わっているかどうかを検出する関数をすでに配置しました（同じjsfiddleで未使用です）。それはあなたを助けるかもしれません、私がそれを解決するのを手伝ってください:)

4

1 に答える 1

0

これが正しい方向への一歩であるかどうかを確認してください。

次のコードを利用して、TimDownによって投稿されたユーザー選択からHTMLを返します。

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

それが定義されたら、定義したメソッドを呼び出してlastCharTRL、最後の文字がRTLであるかどうかを確認し、それに応じて動作することができます。

if (lastCharRTL(getSelectionHtml()))
    $('#pointer').css({top: rects[n].top + 10, left: rects[n].left - 10}).show();
else if(backwards)
    $('#pointer').css({top: rects[0].top + 10, left: rects[0].left - 10}).show();
else
    $('#pointer').css({top: rects[n].top + 10, left: rects[n].right}).show();

デモ

于 2013-03-12T18:53:01.790 に答える