获取和设置文本区域中的文本选择

Question

我想创建一个文本区域，用户可以在其中选择文本的一部分，我会根据他们的选择做出反应。所以我需要

1) 获取选择文本的开始和结束位置

2) 获取焦点的位置，如果在textarea中且没有选择

似乎执行此操作的功能因浏览器而异。那么谁能告诉我在 Office 加载项中执行此操作的方法是什么？

我尝试了以下2种方式（即选择myTextarea中的一部分文字，点击button，然后调试代码），它们似乎都不是正确的功能。

(function() {
    "use strict";

    Office.initialize = function(reason) {
        $(document).ready(function() {
            app.initialize();
            $('#button').click(showSelection);
        });
    };

    function showSelection() {
        // way 1
        console.log(document.selection); // undefined
        document.getElementById("myTextarea").focus();
        var sel = document.selection.createRange(); // Uncaught TypeError: Cannot read property 'createRange' of undefined
        selectedText = sel.text;
        // way 2 
        console.log(document.getElementById("myTextarea").selectionstart); // undefined
        console.log(document.getElementById("myTextarea").selectionend); // undefined
    }
})();

另外，如果有人能告诉我如何通过代码实现以下内容，那就太好了：

1) 从开始和结束位置选择文本的一部分

2) 将焦点设置在textarea的某个位置

编辑 1：

我刚刚在我的 Excel 加载项中尝试了window.getSelection()：

function showselection() {
    var a = window.getSelection();
    var b = window.getSelection().toString();
    var c = window.getSelection().getRangeAt(0);
}

在textarea中选中一段文字，点击button，一步步调试：第一行做成aa = Selection {anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0, is ...；第二行返回""，第三行报错Home.js:19 Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index. 看来选择没有被成功捕获...

这里是JSBin，没有 Excel 插件框架，它返回的结果与上面几乎相同。

Answer 1

使用 JQuery。

例如，以下两行获取插入符号的位置：

function showselection() {
    console.log($('#myTextarea')[0].selectionStart);
    console.log($('#myTextarea')[0].selectionEnd);
}

有一些插件：

https://github.com/localhost/jquery-fieldselection

http://madapaja.github.io/jquery.selection/

第二个有几个带有按钮的简短示例（我们可能会失去选择）。您可以使用他们的 API，或者查看他们的代码以查看他们调用了哪些 JQuery 函数。

Answer 2

如果所需的选择只是 HTML 页面中的选定文本（而不是用户在 Excel/Word 中的选择），那么有一些不错的 stackoverflow answers about accessing that selection。

Answer 3

Office 的 JavaScript API 的一个关键特性是它们遵循异步模型（您在上面为 showSelection() 编写的代码似乎是同步的）。我建议阅读Excel 和Word JS API 概述页面，以了解它们的工作原理。例如，以下是从选择中获取文本的方式：

Word.run(function (context) {
    var myRange = context.document.getSelection();
    context.load(myRange, 'text');
    return context.sync().then(function () {
        log("Selection contents: " + myRange.text);
    });
})

那么对于您问题的其他细节，请按照我的评论中的要求进行澄清。谢谢！

-Michael（Office 插件的 PM）