角度位置Bootstrap元素內選定的文本

我是一個角度初學者，我已經在這個問題上工作了幾天，但我還沒有完全解決它。我試圖創建一個指令，當用戶突出顯示一些文本時，ui-bootstrap工具提示會自動創建。我有下面的代碼幾乎做我想要的。角度位置Bootstrap元素內選定的文本

app.directive('selectOnClick', function ($window, $compile) { 
    return { 
     link: function (scope, element) { 
      element.on('mouseup', function() {  
       if (window.getSelection) { 
        var sel = window.getSelection(); 
        var template = '<a href="#" uib-tooltip="hello">'+sel.toString()+'</a>'; 
        replaced = element.html().replace(new RegExp(sel.toString(), "g"), template); 
        element.html(replaced); 
        $compile(element.contents())(scope); 
       } 
      }); 
     } 
    } 
});

與上面的代碼的問題是，它取代了提示所選文本的每個實例 - 我只想把工具提示周圍被選中的實際文本。

我見過像this one職位，將展示如何在span元素替換選定的文本以下列方式

function surroundSelection() { 
    var span = document.createElement("span"); 
    span.style.fontWeight = "bold"; 
    span.style.color = "green"; 

    if (window.getSelection) { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      var range = sel.getRangeAt(0).cloneRange(); 
      range.surroundContents(span); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
    } 
}

但我不認爲這種方法是與用戶界面的自舉元素，如提示不兼容。我很困難，所以任何建議將不勝感激。

來源

2016-07-07 user1893354

當您從selection獲得匹配文本並從那裏前進時，原始上下文已經丟失 - 如果段落中有多個，則無法知道您選擇了哪個foo。

爲了實現您所需的功能，您需要自己處理selection，以便您可以準確定位並刪除新內容。

你可以參考這個答案如何做到這一點：https://stackoverflow.com/a/6252893/5039495

來源

2016-07-07 03:16:19 Icycool

角度位置Bootstrap元素內選定的文本

回答

相關問題