Wie implementieren Sie die Nistungseffekte von Textanmerkungen im Quilleditor?

Quill Editor: Implementieren Sie geschickt Textetiketten -Verschachtelung

Bei der Annotation von Text in Quilleditor ist es wichtig, den Nistffekt überlappender Anmerkungen zu bewältigen. Dieser Artikel bietet eine Lösung, um die Situation effektiv zu lösen, in der sich mehrere Annotationsindex überschneidet.

Zunächst überprüfen wir gemeinsame Anforderungen und Codeausschnitte:

Beispieldaten:

 const response = {
    "Fehlerwortliste": [
        {
            "AlertMessage": "Es wird empfohlen," NPC Standing Committee/NPC ständige Ausschussmitglieder/NPC -Mitglieder des ständigen Ausschusses zu verwenden (bitte entsprechend der tatsächlichen Situation wählen) "Ersetzen" NPC Ständige Ausschussmitglieder "", "
            "ErsatzEtext": "Nationaler Kongress ständiger Ausschuss/Nationalkongress ständiges Ausschussmitglied/National Congress ständiges Ausschussmitglied (bitte entsprechend der tatsächlichen Situation)", ",", ",", ","
            // ... andere Eigenschaften
            "Start": 9,
            "Ende": 13,
            "ID": 1
        },
        {
            "AlertMessage": "Es wird empfohlen, standardisierte Wörter" Provincial People's Congress Standing Committee "" "zu verwenden", "", ""
            "ErsatzEtext": "Provincial People's Congress Standing Committee",
            // ... andere Eigenschaften
            "Start": 8,
            "Ende": 13,
            "ID": 2
        }
    ],
    // ... andere Eigenschaften
};

Verbesserte Annotationsmethode:

Die ursprüngliche Annotationsmethode hat Defekte und kann verschachtelte Annotationen nicht bewältigen. Wir müssen den Algorithmus optimieren, um sicherzustellen, dass überlappende Annotationsbereiche korrekt behandelt werden.

Kernidee:

1. Sortieren: Sortieren Sie errorwordlist in aufsteigender Reihenfolge gemäß start .
2. Iterative Verarbeitung: Iterieren Sie das sortierte Array und verarbeiten Sie jede Annotation nacheinander.
3. Offset: Für nicht erste Beschriftungen muss die Länge des vorherigen Etiketts berücksichtigt werden und der korrekte start wird berechnet.

Verbesserter Code:

 const sortEderrorList = response.ErrorWordList.sort ((a, b) => A.Start - b.start);

sortEderrorList.foreach ((item, index) => {
    länge = item.end - item.start;
    if (Länge> 0) {
        lass startOffset = item.start;
        if (index> 0) {
            // Berechnen Sie den Offset und vermeiden Sie die wiederholte Kennzeichnung StartOffset = SortEderrorList [INDEX - 1] .end - SortEderrorList [INDEX - 1] .Start;
        }
        this.editor.updateContents ([
            {retain: startOffset},
            {retain: Länge, Attribute: {klick: item}}
        ]);
    }
});

Durch diese Methode können wir überlappende Annotationen effektiv verarbeiten, um den korrekten Nist -Effekt zu erzielen. Dadurch werden mögliche Überschreibungen oder Fehlausrichtungsprobleme im ursprünglichen Code vermieden. Die endgültigen renderierten Annotationsergebnisse spiegeln die Start- und Endpositionen jeder Annotation in den Daten genau wider, selbst wenn sie sich überlappen.

Benutzerdefinierte Blot (optionale Optimierung):

Für eine bessere Wartbarkeit und Skalierbarkeit können Sie in Betracht ziehen, benutzerdefinierte Blots zum Implementieren von Etikettenstilen zu verwenden. Dieser Teil des Codes kann gemäß den tatsächlichen Anforderungen angepasst und optimiert werden.

Durch die oben genannten Verbesserungen kann der Quilleditor perfekt verschachtelte Textanmerkungen abwickeln und die Benutzererfahrung verbessern.

Das obige ist der detaillierte Inhalt vonWie implementieren Sie die Nistungseffekte von Textanmerkungen im Quilleditor?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!