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

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包装选择并打开编辑器。

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

希望它有所帮助！

Answer 2

尝试在github上查看Highlighter.js。它类似于Medium.com博客上发生的事情，但需要一些工作才能达到你想要的效果。

Answer 3

看看这个小提琴：

http://jsfiddle.net/9RxLM/

并使用以下代码：

$(".tiptext").mouseover(function() {
    $(this).children(".description").show();
}).mouseout(function() {
    $(this).children(".description").hide();
});

或者您可以使用jquery工具提示：

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/