Question

我正在为学生申请一个用户能够标记文档的应用程序，因此我的想法是创建持久性标记，现在我正在做的是选择文本并包装到{{1} } tag，我阻止选择cros-paragraph以避免一两个问题，每个段都是一个块，每个块都有一个id，当我在服务器上保存标记时我发送块的id（段落），开始标记的选择和结束以及颜色。当我从服务器上取回标记时，我得到一个标记列表，我在文本的正确位置使用该位置。

标记对象来自服务器

mark

现在我遇到的问题是，当我计算选择的开始和结束时，我得到的段落为没有标记的HTML的字符串，但是当我从服务器获取文本时我得到段落为字符串使用文本标记的HTML。例如，当我保存标记时，我使用以下方式计算开始和结束：

{
  "id": 22,
  "documentId": 5,
  "creatorUserId": 1,
  "blockId": "76d6979a-fa9f-445d-8d91-f30cd0c729a7",
  "chapterId": "ae4e54b8-b23d-4c11-82fa-796b2a32b6e8",
  "start": 26,
  "end": 79,
  "color": "yellow-600-bg",
  "obsolete": false
}

但是当我从服务器获得段落时，我会以这种方式得到段落：

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed et sagittis purus, tempus pellentesque elit

因为这是将HTML标记作为字符串并计算一些额外的位置，标记位于错误的位置，如果我从文本中删除HTML标记，我丢失了文本的标记。

所以例如我选择了这个文字：

Lorem ipsum dolor sit amet， consectetur adipiscing elit

然后我选择单词Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipiscing elit. Sed et sagittis <em>purus, tempus pellentesque</span> elit并且选择的开始位置是22然后结束是37并将标记保存在服务器中，当我从服务器返回文本时我得到：

amet, consectetur

如果我使用相同的开头和结尾定位标记，则标记将被放置在不同的位置，因为它计算了html标记字符的位置。

将标记添加到textBlocks

Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit

所以我怎样才能将标记放在正确的位置，无论如何。

选择标记文字功能

  /**
  * Analyze the text block and add the marking
  * to the right block of text.
  * @param {array} The list of markers
  * @param {array} The array of blocks
  * @return {array} the array of block with the markers.
  */
  public addMarking(markersList, blocksArray): any {
    markersList.result.some((marker) => {
      blocksArray.some((documentChapter) => {
        if (marker.chapterId === documentChapter.id) {
          documentChapter.chapterBlocks.some((block) => {
            if (marker.blockId === block.blockId) {
              const blockText = block.blockElement.text;
              const Markertext = blockText.substring(marker.start, marker.end);
              const markerText = `<mark class="${marker.color}">${Markertext}</mark>`;

              block.blockElement.text = blockText.replace(Markertext, markerText);
              return false;
            }
          });
          return false;
        }
      });
    });
    return blocksArray;
  }

如何将标记文本放入正确位置的段落中

0 个答案: