Rangy：插入符号下的单词（再次）

我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器。 基本上，我需要能够插入人员/标签引用，例如 Twitter/Github/Facebook...。

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

http://jsfiddle.net/A9z3D/ 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 版本，该版本具有文本范围模块 http://code.google.com/p/rangy/wiki/TextRangeModule。问题是我注意到 wysihtml5 也在不同且不兼容的版本（1.2.2）中使用 Rangy（问题与rangy.dom这可能已被删除）。

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

我怎样才能做相当于expand功能，仅使用 rangey 1.2.2？

Edit: 顺便问一下，除了使用之外还有其他解决方案吗？expand功能？我认为修改当前选择并将其恢复回来只是为了知道当前输入的是哪个单词，这有点奇怪和哈克式。是否有一个不涉及选择当前输入的单词的解决方案？我的意思是，一旦我们知道初始插入符号折叠范围，就仅基于范围？

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

阅读了 Rangy 的代码后，我的直觉是在同一页面中加载两个版本的 Rangy 可能是可行的。我用谷歌搜索了一下，发现我是对的。 Tim Down（Rangy 的创造者）在一篇文章中解释了这一点问题报告 https://code.google.com/p/rangy/issues/detail?id=51。他举了这样一个例子：

<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.

否则，必须实施expand忠实地复制 Rangy 1.3 所做的事情并不是一件简单的事情。

这是一个极其原始的代码实现，它将选择扩展到单词边界。此代码将被单词内开始或结束的元素触发。

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 http://jsfiddle.net/lddubeau/V7Lxk/为了它。这应该适用于远程 1.2.2。 （它甚至可以在没有范围的情况下工作。）