0

我正在尝试在 html 文档中模拟中等风格的注释。

这个答案让我几乎到了那里：How to implement Medium-style commenting interface in VueJS

使用这种方法，我可以突出显示文本并发表评论，但我想将评论显示在与评论者选择的范围相同的行上。我所拥有的代码将每个段落视为一个单独的文档，因此我不知道如何返回正确的段落以找到被评论的原始范围。

这是评论组件：

<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>

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

4

1 回答 1

0

无论您想在何处启用评论，请尝试为这些元素指定一个类和一个唯一 ID。

一个类将帮助您识别它已启用评论，而一个 ID 将帮助您唯一地识别它。

在您的逻辑中，您可以访问该元素上的类列表

sel.anchorNode.parentElement.classList

和 ID 为

sel.anchorNode.parentElement.id

借助这种组合，您当然可以将评论与您的​​元素相关联。

于 2020-04-13T18:16:48.387 回答