在Quill编辑器中如何处理文本标注的嵌套问题？-js教程-PHP中文网

在Quill编辑器中如何处理文本标注的嵌套问题？

聖光之護

发布： 2025-03-17 08:44:27

原创

1013人浏览过

quill编辑器嵌套文本标注解决方案：解决重叠标注失效问题

在Quill编辑器中如何处理文本标注的嵌套问题？

本文探讨在Quill编辑器(版本1.3.7)中处理嵌套文本标注的方案，尤其针对接口返回数据中存在重叠标注范围的情况，导致标注失效的问题。

问题描述：

当Quill编辑器接收包含重叠start和end值的文本标注数据时，标注功能失效。

示例数据：

Quill文本内容："输出支部盟员担任省人大常委人"

接口返回数据：

const response = {
    "errorwordlist": [
        {
            "start": 9,
            "end": 13,
            "replacetext": "人大常委会/人大常委会委员/人大常委会组成人员（请根据实际情况选择）",
            // ... other properties
        },
        {
            "start": 8,
            "end": 13,
            "replacetext": "省人大常委会",
            // ... other properties
        }
    ],
    // ... other properties
};

登录后复制

原始代码(存在问题):

使用updateContents方法进行标注：

response.errorwordlist.forEach(item => {
    let length = item.end - item.start;
    if (length > 0) {
        this.editor.updateContents([
            { retain: item.start },
            { retain: length, attributes: { click: item } },
        ]);
    }
});

登录后复制

自定义Blot (click):

// ... (Blot代码，略) ...

登录后复制

解决方案：

核心思路是：1. 对标注数据进行排序和合并；2. 修改updateContents逻辑，处理排序后的数据；3. (可选) 优化自定义Blot，使其能更好地处理嵌套结构。

数据预处理：

首先，对response.errorwordlist按start值进行升序排序。然后，合并重叠的标注。合并策略：如果一个标注完全包含在另一个标注内，则忽略被包含的标注；如果两个标注部分重叠，则合并成一个新的标注，新的start值为较小的start值，新的end值为较大的end值。

function mergeOverlappingAnnotations(annotations) {
    annotations.sort((a, b) => a.start - b.start);
    let mergedAnnotations = [];
    let currentAnnotation = annotations[0];
    for (let i = 1; i < annotations.length; i++) {
        let nextAnnotation = annotations[i];
        if (nextAnnotation.start <= currentAnnotation.end) {
            currentAnnotation.end = Math.max(currentAnnotation.end, nextAnnotation.end);
        } else {
            mergedAnnotations.push(currentAnnotation);
            currentAnnotation = nextAnnotation;
        }
    }
    mergedAnnotations.push(currentAnnotation);
    return mergedAnnotations;
}

let mergedAnnotations = mergeOverlappingAnnotations(response.errorwordlist);

登录后复制

修改updateContents逻辑：

使用排序后的数据，依次应用标注：

mergedAnnotations.forEach(item => {
    let length = item.end - item.start;
    if (length > 0) {
        this.editor.updateContents([
            { retain: item.start },
            { retain: length, attributes: { click: item } },
        ]);
    }
});

登录后复制