尝试在Vue组件中的适当文档范围附近显示评论 [英] Trying to display comments near appropriate doc range in Vue component

问题描述

我正在尝试在html文档中模拟中型注释.

I am attempting to emulate Medium style comments in an html document.

这个答案已经使我快到了:如何实现VueJS中的中型注释界面

This answer has gotten me nearly there: How to implement Medium-style commenting interface in VueJS

使用该方法，我可以突出显示文本并进行注释，但是我想将注释显示在注释器选择的范围的同一行.我所拥有的代码将每个段落都视为一个单独的文档，因此我不知道如何返回正确的段落来查找要注释的原始范围.

With that method, I can highlight text and make comments, but I want to display the coments on the same line as the range the commenter selected. The code as I have treats every paragraph it seems as a separate document, such that I don't know how to return to the correct paragraph to find the original range being commented on.

以下是评论内容:

<template>
  <div class="popup" :style="{top: offsetTop, left: offsetLeft}" ref="popup">
    <span @click="AlertSelectedText">Comment</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      popupInitialTopOffset: 0,
      popupInitialLeftOffset: 0,
      offsetTop: 0,
      offsetLeft: "-999em",
      selectedText: undefined
    };
  },
  methods: {
    ListenToDocumentSelection() {
      let sel = window.getSelection();
      console.log('sel is: ', sel)
      setTimeout(_ => {
        if (sel && !sel.isCollapsed) {
          this.selectedText = sel.toString();
          if (sel.rangeCount) {
            let range = sel.getRangeAt(0).cloneRange();
            console.log('range is: ', range)
            if (range.getBoundingClientRect) {
              var rect = range.getBoundingClientRect();
              console.log('boundingrect is: ', rect)
              let left = rect.left + (rect.right - rect.left) / 2;
              let top = rect.top;

              this.offsetTop = top - this.popupInitialTopOffset - 30 + "px";

              this.offsetLeft = left - this.popupInitialLeftOffset / 2 + "px";
            }
          }
        } else {
          this.offsetLeft = "-999em";
        }
      }, 0);
    },
    AlertSelectedText() {
      alert(`"${this.selectedText}" posted as comment`);
    }
  },
  mounted() {
    this.popupInitialTopOffset = this.$refs.popup.offsetHeight;
    this.popupInitialLeftOffset = this.$refs.popup.offsetWidth;
    console.log('this is the positions of the popup', this.popupInitialTopOffset, this.popupInitialLeftOffset);
    window.addEventListener("mouseup", this.ListenToDocumentSelection);
  },
  destroyed() {
    window.removeEventListener("mouseup", this.ListenToDocumentSelection);
  }
};
</script>
<style scoped>
.popup {
  position: absolute;
  color: #FFF;
  background-color: #000;
  padding: 10px;
  border-radius: 5px;
  transform-origin: center, center;
  cursor: pointer;
}
.popup:after {
  content: "";
  border-bottom: 5px solid #000;
  border-right: 5px solid #000;
  border-top: 5px solid transparent;
  border-left: 5px solid transparent;
  position: absolute;
  top: calc(100% - 5px);
  transform: rotate(45deg);
  left: calc(50% - 3px);
}
</style>

如果我知道如何添加坐标以返回到注释范围，我想我可以管理其余的坐标.

if I could know how to add coordinates for returning to the commented range, I think I could manage the rest.

推荐答案

要启用注释的地方，请尝试为这些元素提供一个类和一个唯一的ID.

Wherever you want to enable commenting, try giving those elements a class and a unique ID.

一个类可以帮助您识别已启用注释，而ID可以帮助您唯一地识别它.

A class would help you identify that it has commenting enabled whereas an ID would help you uniquely identify it.

按照您的逻辑，您可以按以下方式访问该元素上的类列表

In your logic, you can access the list of classes on that element as

sel.anchorNode.parentElement.classList

和ID为

sel.anchorNode.parentElement.id

借助这种组合，您可以肯定地将注释与元素相关联.

With the help of this combination, you can surely associate a comment to your elements.

这篇关于尝试在Vue组件中的适当文档范围附近显示评论的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！