js 实现类似word批注功能

实现类似 Word 批注的功能，可以使用 JavaScript 和 HTML/CSS 来创建一个类似的界面。以下是实现步骤：

1. 首先，需要在页面上创建一个可编辑的文本框，用于输入文本内容。

2. 在文本框下方创建一个评论区域，用于显示批注内容。

3. 当用户选中文本框中的一段文本时，弹出一个窗口，让用户输入批注内容并保存。

4. 将保存的批注内容展示在评论区域中，并且将其与原始文本关联起来。

5. 当用户点击评论区域中的某个批注时，高亮显示对应的文本，并且弹出批注内容。

实现这个功能需要用到一些 JavaScript 的 DOM 操作和事件监听。具体实现步骤可以参考下面的代码示例。

HTML 代码：

<textarea id="content" rows="10" cols="50"></textarea>
<div id="comments"></div>

JavaScript 代码：

// 获取文本框和评论区域的 DOM 元素
var content = document.getElementById('content');
var comments = document.getElementById('comments');

// 监听文本框的选择事件
content.addEventListener('mouseup', function(e) {
  // 获取选择的文本
  var selection = window.getSelection().toString();

  // 如果有选择的文本，则弹出批注窗口
  if (selection) {
    var comment = prompt('请添加批注：');
    if (comment) {
      // 创建一个新的批注元素
      var span = document.createElement('span');
      span.innerHTML = comment;
      span.classList.add('comment');

      // 将批注元素添加到评论区域
      comments.appendChild(span);

      // 获取选择的文本的范围，并将其与批注元素关联起来
      var range = window.getSelection().getRangeAt(0);
      range.surroundContents(span);
    }
  }
});

// 监听评论区域的点击事件
comments.addEventListener('click', function(e) {
  // 如果点击的是批注元素，则高亮显示对应的文本，并弹出批注内容
  if (e.target.classList.contains('comment')) {
    var range = document.createRange();
    range.selectNodeContents(e.target.previousSibling);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    alert(e.target.innerHTML);
  }
});

CSS 代码：

.comment {
  background-color: yellow;
  cursor: pointer;
}

这段代码实现了一个简单的类似 Word 批注的功能，当用户选择文本时，会弹出一个窗口让用户输入批注内容，然后将批注内容展示在评论区域中，同时将其与原始文本关联起来。当用户点击评论区域中的某个批注时，会高亮显示对应的文本，并且弹出批注内容。