當文本中的單詞突出顯示/選中時執行操作

Question

我需要爲選定/突出顯示的文本顯示工具提示，以允許用戶將其設置爲斜體/粗體/正常。我可能會用相關的類來包裝這個單詞，但我需要弄清楚如何顯示這樣的工具提示和處理選定的單詞，以便我可以對它執行操作。我試圖找到一個這樣做的圖書館，但迄今沒有運氣。下面

圖片展示了什麼我後：

當用戶選擇單詞工程和工具提示出現。

Answer 1

jQuery .select()事件處理程序應該是你正在尋找的。在文檔頁面上有一個應該可以重新調整用途的例子。

但是，定位...工具提示元素可能會很棘手。獲得選擇事件功能後，可能值得第二個問題。

Answer 2

您可以將事件綁定到主體的mouseup處理程序，並檢查是否有任何文本被選中。

從這裏你可以檢查選擇是否有任何文本，如果它確實如此，請根據需要顯示工具提示。

這裏有一個封裝中，加粗和放大文本跨度所選文本的例子：http://jsbin.com/yezake/edit?js,output

const mouseUpHandler = function() { 
    const sel = document.getSelection(); 

    if(!sel.toString()) { 
    $('.foo').contents().unwrap(); 
    sel.removeAllRanges(); 
    return; 
    } 

    const newNode = document.createElement('span'); 
    newNode.className = 'foo'; 


    const range = sel.getRangeAt(0); 
    range.surroundContents(newNode); 

    sel.removeAllRanges(); 
    sel.addRange(range); 

}; 

$('body').on('mouseup', mouseUpHandler); 

用多一點點的時間，你可以在你的提示標記添加到這一點，並表明，當一個選擇被製成。這可能是一個非常幼稚的實現，但如果你想推出自己的應用程序，它可以讓你開始。

Answer 3

試試這個，需要JQuery的

https://jsfiddle.net/Ripper1992/L0suavjd/

• 腳本

  $(document).ready(function(){ 
      $('span').mouseenter(function(){ 
       var span = $(this); 
       $('.tooltip').fadeIn(); 
      }) 
      $('.tooltip').mouseleave(function(){ 
       var span = $(this); 
       $('.tooltip').fadeOut(); 
      }) 
      $('a').click(function(){ 
       var classe = $(this).attr('class'); 
       var spanClass = $('span').removeClass(); 
       $('span').addClass(classe); 
      }); 
  }) 
  

• HTML

  <div>The Piano <span class=''>Works</span> is like a live</div> 
  
  <div class="tooltip"> 
      <a href="#" class="bold">Bold</a> 
      <a href="#" class="italic">Italic</a> 
      <a href="#" class="normal">Normal</a> 
  </div> 
  

• CSS

  .tooltip{ 
      display: none; 
      border: solid 1px #CCC; 
      width: 130px; 
      text-align: center; 
      position: absolute; 
  } 
  .bold{ 
      font-weight: bold; 
      font-style: normal; 
  } 
  .italic{ 
      font-weight: normal; 
      font-style: italic; 
  } 
  .normal{ 
      font-weight: normal; 
      font-style: normal; 
  }