如何重新创建中高亮显示功能?

I couldn't work out - or find any resources, on how to create the highlighting thing they do on medium.com

我无法计算——也找不到任何资源，关于如何创建他们在medium.com上做的突出显示

To clarify:

澄清:

When you highlight a selection of words in an article, a little tooltip pops up with the option to tweet or comment on the selection of words you highlighted.

当你在一篇文章中突出显示一组单词时，会弹出一个小工具提示，提示你可以对你突出显示的单词进行tweet或评论。

Here's a screenshot:

这里有一个截图:

I have absolutely no idea how to achieve this - so I don't have any code to provide (and I can't work it out from the medium.com source)

我完全不知道如何实现这一点——所以我没有任何代码可以提供(我也无法从medium.com的源代码中找到它)

If you have any idea on how to do this - please share

如果你有什么想法，请分享

Thanks, Tom

谢谢,汤姆

3 个解决方案

#1

First step is to get the selection of the user. This can be done with window.getSelection().

第一步是获取用户的选择。这可以通过windows . 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 
});

Then you need to create a sticky tooltip on the position of this selection (you can find this by getting the element.offsetLeft, element.offsetTop of your element). Then you need to hook in a commenting system that stores the relationship to the selection (by wrapping the selection with a span and an ID for example and open up the editor.

然后，您需要在这个选择的位置上创建一个粘性的工具提示(您可以通过获取元素来找到它)。offsetLeft,元素。offsetTop元素)。然后，您需要引入一个注释系统来存储与选择的关系(例如，使用span和ID包装选择并打开编辑器)。

This is only the basic introduction for what you asked, it’s slightly more complex but also depends on what you exactly want to do with it.

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

Hope it helps!

希望它可以帮助!

3 个解决方案

#1

更多相关文章

随机推荐