如何重新创建中高亮功能？

Question

我无法解决 - 或找到任何资源,如何创建他们在medium.com上做的突出显示的事情

澄清:

当您突出显示文章中的一系列单词时,会弹出一个小工具提示,其中包含对您突出显示的单词选择进行推文或评论的选项.

这是一个截图:

我完全不知道如何实现这一点 - 所以我没有提供任何代码(我无法从medium.com源代码中解决)

如果你对如何做到这一点有任何想法 - 请分享

谢谢,汤姆

Answer 1

第一步是选择用户.这可以通过以下方式完成window.getSelection().

var getSelectedText = function () {
  var selectedText = '';

  if (window.getSelection()) {
    selectedText = window.getSelection();
  } else if (document.getSelection()) {
    selectedText = document.getSelection();
  } else if (document.selection) {
    selectedText = document.selection.createRange().text;
  }

  return selectedText;
};

window.addEventListener('mouseup', function () {
  var result = getSelectedText();

  // Now you can do whatever you want with your selected text 
});

然后,你需要创建此选择的位置粘提示(可以通过获取找到这个element.offsetLeft,element.offsetTop你的元素).然后,您需要挂钩一个注释系统,该系统将关系存储到选择中(例如,通过使用span和ID包装选择并打开编辑器).

这只是你问的基本介绍,它稍微复杂一点,但也取决于你究竟想用它做什么.

希望能帮助到你!