javascript - Rangy:插入符号下的单词(再次)

Question

我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器。基本上，我需要能够像 Twitter/Github/Facebook 那样插入人物/主题标签引用……做。

我发现一些人的代码试图实现同样的事情。

http://jsfiddle.net/A9z3D/

这工作得很好，除了它只对最后一个词提供建议并且有一些错误。而且我想要一个像 Twitter 这样的选择框，而不是简单的使用 tab 键的“选择切换”。

为此，我尝试检测当前输入的单词。

        getCurrentlyTypedWord: function(e) {
            var iframe = this.$("iframe.wysihtml5-sandbox").get(0);
            var sel = rangy.getSelection(iframe);
            var word;
            if (sel.rangeCount > 0 && sel.isCollapsed) {
                console.debug("Rangy: ",sel);
                var initialCaretPositionRange = sel.getRangeAt(0);
                var rangeToExpand = initialCaretPositionRange.cloneRange();
                var newStartOffset = rangeToExpand.startOffset > 0 ? rangeToExpand.startOffset - 1 : 0;
                rangeToExpand.setStart(rangeToExpand.startContainer,newStartOffset);
                sel.setSingleRange(rangeToExpand);
                sel.expand("word", {
                    trim: true,
                    wordOptions: {
                         includeTrailingSpace: true,
                         //wordRegex: /([a-z0-9]+)*/gi
                         wordRegex: /[a-z0-9]+('[a-z0-9]+)*/gi
                        // wordRegex: /([a-z0-9]+)*/gi
                    }
                });
                word = sel.text();
                sel.removeAllRanges();
                sel.setSingleRange(initialCaretPositionRange);
            } else {
                word = "noRange";
            }
            console.debug("WORD=",word);
            return word;

这仅在选择折叠时触发。请注意，我必须处理起始偏移量的向后移动，因为如果插入符号位于单词的末尾(就像用户键入时大多数情况下的情况一样)，则扩展函数不会围绕当前输入的单词。

到现在为止它工作得很好，问题是它使用了 Rangy 1.3 的 alpha 版本，它有 TextRangeModule .问题是我注意到 wysihtml5 也在不同且不兼容的版本 (1.2.2) 中使用 Rangy(rangy.dom 的问题可能已被删除)。

由于 Rangy 使用全局 window.rangy 变量，我想无论如何我都必须使用版本 1.2.2。

如何仅使用 rangy 1.2.2 来执行与 expand 函数等效的操作？

编辑:顺便问一下，除了使用expand 函数还有其他解决方案吗？我认为修改当前选择并将其还原只是为了知道当前键入的是哪个单词有点奇怪和古怪。有没有不涉及选择当前键入的单词的解决方案？我的意思是，一旦我们知道初始插入符折叠范围，就只基于范围？

Answer 1

As Rangy uses a global window.rangy variable, I think I'll have to use version 1.2.2 anyway.

阅读了 Rangy 的代码后，我的直觉是，在同一页面中加载两个版本的 Rangy 可能是可行的。我做了谷歌搜索，发现我是对的。 Tim Down(Rangy 的创建者)在 issue report 中对此进行了解释.他举了这个例子:

<script type="text/javascript" src="/rangy-1.0.1/rangy-core.js"></script>
<script type="text/javascript" src="/rangy-1.0.1/rangy-cssclassapplier.js"></script>

<script type="text/javascript">
    var rangy1 = rangy;
</script>

<script type="text/javascript" src="/rangy-1.1.2/rangy-core.js"></script>
<script type="text/javascript" src="/rangy-1.1.2/rangy-cssclassapplier.js"></script>

因此您可以加载您的代码 需要的 Rangy 版本。重命名它并在您的代码中使用此名称，然后加载 wysihtml5 想要的内容并将 this 版本保留为 rangy。

否则，必须以忠实复制 Rangy 1.3 所做的方式自己实现 expand 并不是一件简单的事情。

这是一个非常原始的代码实现，可以将选择范围扩展到单词边界。此代码将被以单词开头或结尾的元素触发。

var word_sep = " ";

function expand() {
    var sel = rangy.getSelection();
    var range = sel.getRangeAt(0);

    var start_node = range.startContainer;
    if (start_node.nodeType === Node.TEXT_NODE) {
        var sep_at = start_node.nodeValue.lastIndexOf(word_sep, range.startOffset);
        range.setStart(start_node, (sep_at !== -1) ? sep_at + 1 : 0);
    }

    var end_node = range.endContainer;
    if (end_node.nodeType === Node.TEXT_NODE) {
        var sep_at = end_node.nodeValue.indexOf(word_sep, range.endOffset);
        range.setEnd(end_node, (sep_at !== -1) ? sep_at : range.endContainer.nodeValue.length);
    }
    sel.setSingleRange(range);
}

这是一个 fiddle为了它。这应该适用于范围 1.2.2。 (它甚至可以在没有 rangy 的情况下工作。)