Quill自定義Blot解決文本標(biāo)注嵌套難題
在Quill富文本編輯器中，實現(xiàn)自定義Blot進行文本標(biāo)注時，常常遇到標(biāo)注區(qū)域重疊的嵌套問題。本文將詳細講解如何有效解決Quill自定義Blot的文本標(biāo)注嵌套問題。
問題描述
假設(shè)Quill編輯器中存在文本：“輸出支部盟員擔(dān)任省人大常委人”。我們需要根據(jù)接口數(shù)據(jù)對特定詞語進行標(biāo)注，例如“人大常委”和“省人大常委”。由于這兩個詞語的標(biāo)注范圍存在重疊，傳統(tǒng)的標(biāo)注方法將失效，無法實現(xiàn)正確的嵌套標(biāo)注效果。
數(shù)據(jù)和代碼示例
接口返回的數(shù)據(jù)結(jié)構(gòu)如下：
const response = { "errorwordlist": [ { "alertmessage": "建議用 "人大常委會/人大常委會委員/人大常委會組成人員（請根據(jù)實際情況選擇）" 替換 "人大常委"", "replacetext": "人大常委會/人大常委會委員/人大常委會組成人員（請根據(jù)實際情況選擇）", "level": 19, "tagids": "90009,90004", "sourcetext": "人大常委", "start": 9, "selfword": 0, "end": 13, "id": 1, "explanation": "輸出支部盟員擔(dān)任省<p style="color:red;font-size:15;font-weight:bold;">人大常委</p>人nn", "istry": 0, "jdtype": 1 }, { "alertmessage": "建議使用規(guī)范用詞 "省人大常委會"", "replacetext": "省人大常委會", "level": 19, "tagids": "90009,90004", "sourcetext": "省人大常委", "start": 8, "selfword": 0, "end": 13, "id": 2, "explanation": "輸出支部盟員擔(dān)任省<p style="color:red;font-size:15;font-weight:bold;">人大常委</p>人nn", "istry": 0, "jdtype": 1 } ], "sensitivewordlist": [], "privacylist": [] };
原始的標(biāo)注代碼：
if (response.errorwordlist && response.errorwordlist.length > 0) { 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：
import Quill from 'quill'; import md5 from 'js-md5'; class ClickBlot extends Quill.Inline { static create(value) { const node = super.create(value); if (value) { const { id, jdtype } = value; node.setAttribute('data-id', id); node.setAttribute('data-tab', jdtype); node.classList.add(jdtype === '1' ? 'error-word-mark' : 'sensitive-word-mark'); } return node; } static formats(domNode) { return { id: domNode.getAttribute('data-id'), jdtype: domNode.getAttribute('data-tab') }; } } ClickBlot.blotName = 'click'; ClickBlot.tagName = 'span'; export default ClickBlot;
解決方案
為了解決嵌套標(biāo)注問題，我們需要改進標(biāo)注邏輯和自定義Blot。
-
排序和處理重疊： 首先，按start位置排序標(biāo)注數(shù)據(jù)，并檢查重疊。 一個更優(yōu)化的方案是使用區(qū)間合并算法，將重疊的標(biāo)注區(qū)間合并。
-
改進自定義Blot： 自定義Blot需要能夠處理嵌套結(jié)構(gòu)。 這需要修改create方法，遞歸處理嵌套標(biāo)注。
以下是一個改進后的代碼示例，使用了區(qū)間合并算法來處理重疊：
function mergeIntervals(intervals) { if (!intervals || intervals.length === 0) return []; intervals.sort((a, b) => a.start - b.start); const merged = [intervals[0]]; for (let i = 1; i < intervals.length; i++) { const current = intervals[i]; const lastMerged = merged[merged.length - 1]; if (current.start <= lastMerged.end) { lastMerged.end = Math.max(lastMerged.end, current.end); } else { merged.push(current); } } return merged; } const sortedList = response.errorwordlist.map(item => ({start: item.start, end: item.end})); const mergedIntervals = mergeIntervals(sortedList); mergedIntervals.forEach(interval => { const matchingitems = response.errorwordlist.filter(item => item.start === interval.start && item.end === interval.end); matchingItems.forEach(item => { this.editor.updateContents([ { retain: item.start }, { retain: item.end - item.start, attributes: { click: item } }, ]); }) });
這個改進后的代碼首先對標(biāo)注區(qū)間進行合并，然后應(yīng)用到編輯器中。 這避免了多次應(yīng)用相同的標(biāo)注，解決了嵌套問題。 記住，你需要根據(jù)你的實際需求調(diào)整代碼，例如處理不同類型的標(biāo)注。 這只是一個更健壯的處理嵌套標(biāo)注的示例。
通過以上改進，可以有效解決Quill自定義Blot的文本標(biāo)注嵌套問題，實現(xiàn)更準(zhǔn)確和復(fù)雜的文本標(biāo)注功能。 記住，處理嵌套標(biāo)注的關(guān)鍵在于對標(biāo)注數(shù)據(jù)進行排序和合并，以及自定義Blot對嵌套結(jié)構(gòu)的支持。
