如何实现持久化还原

[lleeyoung]

No description provided.

[zjyjstgbc]

同求

[zy20113377]

获取展示页面对应的text对象作为入参，即可高亮

mock数据：

state.list = [
    {
        "evaluateContent":"1、交通便利：距离[{10}]号线[{首经贸}]约[{516}]米\n2、景观好：国家规定的分就分的复活甲方很好，吕法国公鸡发\n3、居住人少：感觉防范化解复活甲方法分就分的放假鸡飞蛋打惊魂甫定的周边放放风",
        "readLines":[
            {
                "readLine":{
                    "anchorNode":{
                        "data":"1、交通便利：距离[{10}]号线[{首经贸}]约[{516}]米"
                    },
                    "focusNode":{
                        "data":"1、交通便利：距离[{10}]号线[{首经贸}]约[{516}]米"
                    },
                    "focusOffset":33,
                    "anchorOffset":2
                },
                "cancelId":1689682201379
            },
            {
                "cancelId":1689682214332,
                "readLine":{
                    "anchorOffset":6,
                    "anchorNode":{
                        "data":"2、景观好：国家规定的分就分的复活甲方很好，吕法国公鸡发"
                    },
                    "focusNode":{
                        "data":"3、居住人少：感觉防范化解复活甲方法分就分的放假鸡飞蛋打惊魂甫定的周边放放风"
                    },
                    "focusOffset":15
                }
            }
        ]
    }
]

dom

<div class="text-box">
        <p
          v-for="(list, i) in evaluateContent.split('\n')"
          :key="'desc' + i"
          class="article-body"
        >
          {{ list }}
        </p>
</div>

javascript：

state.list.forEach((element: any, index: number) => {
    if (!element?.readLines || element.readLines?.length === 0) return;
    element.readLines.forEach((item: any) => {
      const list: Array<string> = element.evaluateContent.split('\n');
      const isSameText = item.readLine.anchorNode.data === item.readLine.focusNode.data;
      const startIndex = list.findIndex((l: string) => l === item.readLine.anchorNode.data);
      const endIndex = isSameText
        ? startIndex
        : list.findIndex((l: string) => l === item.readLine.focusNode.data);
      const startText =
        document.querySelectorAll('.text-box')[index].childNodes[startIndex + 1].firstChild;
      const endText = isSameText
        ? startText
        : document.querySelectorAll('.text-box')[index].childNodes[endIndex + 1].firstChild;
      const data = {
        anchorOffset: item.readLine.anchorOffset,
        anchorNode: startText,
        focusNode: endText,
        focusOffset: item.readLine.focusOffset,
      };
      state.em.highlightLine(data, item.cancelId);
    });
  });

效果：
https://webimg.ziroom.com/760a624b-ac01-437b-84e6-0c72cd5784db.png