Quill编辑器：巧妙实现文本标注嵌套
在Quill编辑器中进行文本标注时，处理重叠标注的嵌套效果至关重要。本文提供一种解决方案，有效解决多个标注索引重叠的情况。
首先，我们回顾下常见的需求和代码片段：
示例数据：
const response = { "errorwordlist": [ { "alertmessage": "建议用 "人大常委会/人大常委会委员/人大常委会组成人员（请根据实际情况选择）" 替换 "人大常委"", "replacetext": "人大常委会/人大常委会委员/人大常委会组成人员（请根据实际情况选择）", // ... other properties "start": 9, "end": 13, "id": 1 }, { "alertmessage": "建议使用规范用词 "省人大常委会"", "replacetext": "省人大常委会", // ... other properties "start": 8, "end": 13, "id": 2 } ], // ... other properties };
改进后的标注方法：
原有的标注方法存在缺陷，无法处理嵌套标注。我们需要优化算法，确保正确处理重叠的标注区域。
核心思路：
- 排序: 根据start索引对errorwordlist进行升序排序。
- 迭代处理: 遍历排序后的数组，依次处理每个标注。
- 偏移量: 对于非第一个标注，需要考虑前一个标注的长度，计算正确的start偏移量。
改进后的代码：
const sortedErrorList = response.errorwordlist.sort((a, b) => a.start - b.start); sortedErrorList.forEach((item, index) => { let length = item.end - item.start; if (length > 0) { let startOffset = item.start; if (index > 0) { // 计算偏移量，避免重复标注 startOffset += sortedErrorList[index - 1].end - sortedErrorList[index - 1].start; } this.editor.updateContents([ { retain: startOffset }, { retain: length, attributes: { click: item } } ]); } });
通过此方法，我们可以有效地处理重叠标注，实现正确的嵌套效果。 这避免了原代码中可能出现的标注覆盖或错位问题。 最终呈现的标注结果将准确反映数据中各个标注的起始和结束位置，即使它们存在重叠。
自定义Blot (可选优化):
为了更好的可维护性和可扩展性，可以考虑使用自定义Blot来实现标注样式，这部分代码可以根据实际需求进行调整和优化。
通过以上改进，Quill编辑器可以完美地处理嵌套文本标注，提升用户体验。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
