在文本區域中獲取和設置文本選擇

Question

我想創建一個textarea，用戶可以在其中選擇文本的一部分，然後根據他們的選擇做出反應。所以，我需要

1）獲取選定的文本

2）獲得焦點的位置，如果是在文本區域並沒有選擇

似乎開始和結束位置這樣做的功能是不同的從一個探險家到另一個。那麼有誰能告訴我在Office加載項中做什麼的方法？

我試過以下兩種方法（即選擇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：

我只是試圖window.getSelection()我的Excel插件中：

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

用於Office的JavaScript API的一個關鍵特性是它們遵循異步模型（上面爲showSelection（）所寫的代碼似乎是同步的）。我建議您閱讀Excel和 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); 
    }); 
}) 

那麼對於你的問題，請澄清在我的評論要求的其他具體。謝謝！

- 邁克爾（PM爲Office插件）

Answer 3

如果需要的選擇就是在HTML頁面中選擇文本（而不是用戶在Excel/Word中選擇），然後有一些好的stackoverflow answers about accessing that selection。