Машинопись getSelection исчезнет

Question

В Vue и машинописи у меня есть собственное контекстное меню:

<context-menu id="context-menu" ref="ctxMenu">
      <li @click="ctxMenuClickItem1($event)" v-on:mouseover="menuItemMouseover($event)" v-on:mouseleave="menuItemMouseleave($event)" v-bind:style="getMenuItemStyle()" >Open in TMS</li>
      <li @click="ctxMenuClickItem2($event)" v-on:mouseover="menuItemMouseover($event)" v-on:mouseleave="menuItemMouseleave($event)" v-bind:style="getMenuItemStyle()" >Open in OnDemand</li>
      <li @click="doCopy()" >Copy</li>
    </context-menu>

И когда я выделил текст на странице, а затем щелкнул третий пункт в контекстном меню (doCopy), выделение исчезло.

У функции копирования выглядит так:

 doCopy: function () {
  debugger;
  var selection = window.getSelection();
},

и после клика выделение пусто: selection.toString() равно ""

Как скопировать выделенный текст?

Answer 1

Когда вы щелкаете в контекстном меню, ваш выбор рушится (или сбрасывается), возможно, из-за перемещения фокуса. Вам нужно получить выбор, когда сработало событие contextmenu, и восстановить выбор в doCopy. Пример для JS:

var range = document.createRange();
docucment.addEventListener('contextmenu', (ev) => {
    let selection = window.getSelection();
    if(selection.rangeCount > 0) {}
    range = selection.getRangeAt(0);
})
doCopy = function(){
  let selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');//save selection in buffer

}

Если вы выбираете текст в элементе contenteditable, вам нужно установить фокус в этом элементе.