quill.formatText() lässt verschachtelte Formate nicht zu

Question

Ich verwende quill.formatText(), um meinem Texteditor ein benutzerdefiniertes "Highlight" -Format hinzuzufügen. Ich streckte einen Klecks wie so:

let Inline = Quill.import('blots/inline'); 
class highlight extends Inline { 
    static create() { 
     return super.create(); 
    } 

    static formats() { 
     return true; 
    } 
} 
highlight.blotName = 'highlight'; 
highlight.className = 'highlight'; 
highlight.tagName = 'span'; 
Quill.register(highlight); 

ich dann quill.formatText(start, selectionLength, 'highlight', true); nennen, die in einem <span class="highlight"> Tag meiner Auswahl wickelt. So weit, ist es gut.

Das Problem ist, ich möchte jede Auswahl in einem eigenen span Tag gewickelt werden. Wenn ich den Text zweifach auswähle, bleibt nur der äußere span übrig.

Zum Beispiel mit dem Text test inside text. Wenn ich die ganze Reihe zusätzlich nur das Wort inside hervorzuheben, würde ich bekommen erwarten:

<span class="highlight">Test <span class="highlight">inside</span> text</span>

Während ich tatsächlich bekommen:

<span class="highlight">Test inside text</span>

Es scheint, wie dies eine ist Optimierung, die QuillJS hinter den Kulissen macht - kann ich es trotzdem ausschalten, so dass ich beide verschachtelten span s behalten kann?

Answer 1

Anstatt das Format nur wahr oder falsch zu machen, versuchen Sie es mit einer Art ID, die den Anwendungsfall identifiziert. Sie können dann entweder ein Datenattribut zum Bereich hinzufügen, um die ID zu halten, oder eine eindeutige Klasse wie in Ihren Kommentaren erstellen.

Sie könnten diesen Pull-Request auf Pinole hilfreich in immer zu einer Lösung finden, die für Sie arbeitet (oder auch nur diesen Code verwenden, um direkt)

https://github.com/quilljs/quill/pull/1217

Answer 2

Dies ist keine reine Optimierung - es ist notwendig für den Determinismus, den Quill garantiert. Wenn Sie Text "Test in Text" haben und sagen, dass es fett gedruckt ist, garantiert Quill die Ausgabe <strong>Test inside text</strong>, nicht <strong>Test inside </strong><strong>text</strong> oder <strong>Test <strong>inside</strong> text</strong> oder die unendliche Anzahl von legalen HTML-Optionen.

Quill ist so konzipiert, dass es eindeutig ist, so dass Sie entweder Mehrdeutigkeit aus Ihrem Design entfernen oder einen Editor verwenden können, der dies ermöglicht.