如何重新创建中等高光功能？ [关闭]答案

【问题标题】：How can I recreate the medium highlight function? [closed]如何重新创建中等高光功能？ [关闭]
【发布时间】：2014-07-20 01:45:30
【问题描述】：

我无法解决 - 或找到任何资源，关于如何创建他们在 medium.com 上所做的突出显示操作

澄清一下：

当您在文章中突出显示选定的单词时，会弹出一个小工具提示，其中包含对您突出显示的选定单词进行推文或评论的选项。

这是一个屏幕截图：

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

如果您对如何执行此操作有任何想法 - 请分享

谢谢，汤姆

【问题讨论】：

Rangy 可能对你有帮助：code.google.com/p/rangy
在这里回答：stackoverflow.com/a/18302723/1323652

标签： javascript jquery html css

【解决方案1】：

看看这个小提琴：

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/

【讨论】：

这作为一种工具提示技术很好，但我不确定它如何解决获取用户选择的文本的问题。

【解决方案2】：

尝试查看 github 上的 Highlighter.js。这类似于 Medium.com 博客上发生的事情，但需要一些工作才能实现您想要的。

【讨论】：

【解决方案3】：

第一步是获取用户的选择。这可以通过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 来找到它）。然后，您需要挂钩存储与选择的关系的评论系统（例如，通过使用跨度和 ID 包装选择并打开编辑器。

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

希望对你有帮助！

【讨论】：