5

我编写了一个代码来使用 javascript 检测选择的结束，并在结束位置放置一个标记。看到这个jsfiddle：http: //jsfiddle.net/vCwwN/

上面的代码执行以下操作：

  • 它正确处理所有 LTR 脚本（例如英语）（正确显示末尾的标记）。
  • 对于 LTR 脚本（例如英语）它处理选择是向前（从左/上到右/下）还是向后（从右/下到左/上）正确显示选择停止的标记（使用鼠标或键盘） .
  • 它用于getClientRects查找所有选择矩形边界，并用于检测选择方向（是否向后）。根据这两个信息，它将标记放置在末尾。

您可以尝试为英文脚本选择上面描述的内容，没有任何问题。唯一的问题是当您尝试处理 RTL 脚本（例如阿拉伯语）时，标记会显示在所选 RTL 脚本的开头而不是结尾（鼠标/键盘实际停止的位置）。这些会导致问题：

  • 在 RTL 脚本中开始选择（阿拉伯语），在 RTL 脚本中结束选择（阿拉伯语）。这会在选择开始时显示标记。
  • 在 LTR 脚本（英语）中开始选择，在 RTL（阿拉伯语）脚本中结束选择。这会在 RTL 脚本选择的开头（而不是结尾）显示标记。

基本上，从任何地方开始（LTR 或 RTL）并以 RTL 脚本结束的选择是不正确的。任何其他情况都得到了正确处理（例如，以 LTR 或 RTL 开头并以 LTR 结尾，甚至在途中通过 RTL 脚本）。

问题是 RTL 脚本的流向是翻转的，因此向后是向前，向前是向后。这就是为什么我的代码无法正确处理 RTL 并且反向破解的原因。

我想到的一种解决方案是检测选择的最后一个字符，并查看它是否具有 RTL 脚本，然后基于此翻转后向标志。我已经放置了一个函数来检测文本是否以 RTL 字符结尾（它在同一个未使用的 jsfiddle 中）。它可能会帮助你，帮我解决它:)

4

1 回答 1

0

看看这是否是朝着正确方向迈出的一步。

它利用以下代码从Tim Down发布的用户选择中返回 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 回答