Detailliertes Beispiel zum Einfügen benutzerdefinierter HTML-Datensätze im Quill-Editor

Wir schreiben bereits das Jahr 2020. Hungrige Menschen geben sich nicht mehr mit einfachen Texten zufrieden, daher gibt es ausgefallene Texte in verschiedenen Stilen. Texte zu haben, reicht jedoch nicht aus. Wir müssen Benutzern auch ermöglichen, beim Bearbeiten verschiedene benutzerdefinierte Nachrichtentypen einzufügen, damit die von uns gesendeten Soft-Artikel schöner werden. Aus diesem Grund wurde dieser Artikel geschrieben.

Vorwort

Aufgrund der Rich-Text-Filterung, die mit dem Quill-Editor geliefert wird (die meisten gängigen Editoren filtern Rich-Text), stoßen Entwickler auf große Probleme, wenn sie benutzerdefinierte HTML-Vorlagen konfigurieren möchten.

1. Analyse der Quill-Rendering-Logik

Um den HTML-Blockinhalt in Quill anzupassen, müssen Sie zunächst den internen Rendering-Prozess von Quill verstehen. Hier sind einige wichtige Konzepte, die Sie verstehen sollten:

1. Delta

Delta ist ein in Quill definiertes Datenformat, das zur Darstellung von Dokumentinhalten und Dokumentänderungsvorgängen verwendet wird. Es ist leicht zu lesen und hat ein einfaches Format. Dokumentinhalte werden in Form von Delta verwaltet. HTML-Inhalte und Delta können ineinander konvertiert werden.

Zum Beispiel:

Ein solcher Rich Text wird im folgenden Format dargestellt:

{  
"ops":[ 
{"insert":"das ist ein einfacher Text.\\naber wenn "}, 
{"attributes":{"bold":true},"insert":"es ist "}, 
{"insert":"nicht fett.\\nlass es mich versuchen "}, 
{"Attribute":{"kursiv":true},"Einfügung":"kursiv "}, 
{"insert":"haha\\nwas ist mit "}, {"attributes": 
{"kursiv":wahr,"fett":wahr},"einfügen":"beide"}, 
{"einfügen":" ?\\n"} ]  
}"

Normaler Text wird als Einfügeaktion definiert, jedes Element stellt ein Delta dar, das eine Beschreibung des Textinhalts ist.

Wenn eine Änderung oder Löschung erfolgt, wird in ähnlicher Weise ein entsprechendes Delta generiert und anschließend das neu generierte Änderungsdelta mit dem ursprünglichen Delta zusammengeführt, um ein neues Delta zu generieren. (Delta enthält drei Operationen: Einfügen, Löschen, Beibehalten)

Behalten Sie die ersten 10 Zeichen bei und fetten Sie die folgenden 20 Zeichen. Das Delta lautet wie folgt:

{
  "ops": [
    { "zurückbehalten": },
    { "behalten": , "Attribute": { "fett": } }
  ]
}

Behalten Sie die ersten 10 Zeichen und löschen Sie die folgenden 20 Zeichen wie folgt:

{
  "ops": [
    { "zurückbehalten": },
    { "löschen": }
  ]
}

2. Pergament

Parchment ist ein abstraktes Dokumentmodell, das Blots verwaltet.

Wenn Parchment als vollständige DOM-Baumstruktur verstanden wird, dann ist Blot ein einzelner Knoten darin. Zusätzlich zu den Standardeinstellungen in Quill können wir Blot auch individuell anpassen, was mehr Raum für Erweiterungen bietet.

3. Abtupfen

Blot ist eine Komponente des Parchment-Dokuments, die der Abstraktion des DOM-Knotentyps entspricht. Eine bestimmte Blot-Instanz enthält jedoch noch andere Knoteninformationen.

Der globale Stammknoten Blot ist ein von Quill angepasster Blot vom Typ Scroll, der alle darunter liegenden Blots verwaltet.

Die Implementierungsdefinition von Blot finden Sie hier: https://github.com/quilljs/parchment#blots

Die Standarddefinition von Blot in Quill lautet wie folgt:

Zu den gebräuchlichen Formaten gehören TextBlot (normaler Text in einer Zeile), Inline (normaler Text mit Formatierungen in einer Zeile), Block (Zeile auf Blockebene, normalerweise in Absätzen), Break (Zeilenumbruch), Image (Bild-IMG-Einfügung) und Bold (fetter Text).

Wie konstruiert ein HTML-Stück einen Blot? Quill priorisiert den Ausschluss von Textknoten basierend auf dem Knotentyp. Wenn es sich um einen Elementknoten handelt, wird er erneut basierend auf dem Klassennamen des Knotens beurteilt. Wenn immer noch kein passender BlotName gefunden werden kann, wird standardmäßig die folgende Zuordnungsbeziehung abgeglichen, um die entsprechende BlotClass zu finden.

4. Die praktische Bedeutung von Delta

Da wir bereits Blot zur Darstellung unserer Inhaltsstruktur haben, warum brauchen wir dann noch Delta? Delta selbst ist lediglich eine Wartung von Inhaltsdaten. Das heißt, jede Aktualisierung von HTML, sei es eine Benutzereingabe oder ein API-Vorgang, wird synchron mit Delta aktualisiert. Wenn Delta nicht als Datenquelle von HTML verwendet wird, welchen Sinn hat es dann, eine Kopie der Delta-Daten zu verwalten?

Wenn HTML => Delta, aber Delta=>HTML nicht existiert, welchen Sinn hat es dann, ständig ein Delta beizubehalten?

1. Das Generieren von HTML aus Delta ist tatsächlich möglich, aber sein Anwendungsszenario beschränkt sich auf die Initialisierung des Dokuments. Quill analysiert die eingehende Initialisierungs-HTML-Zeichenfolge und generiert das entsprechende Delta. Anschließend wird durch Anwenden von Delta ein DOM-Knoten generiert und auf der Seite angezeigt.

2. Vielleicht sind Sie damit immer noch nicht zufrieden. Warum müssen wir diesen Prozess durchlaufen? Können wir während der Initialisierung nicht einfach eine Zeichenfolge document.getElementById('container').innerHTML = val verwenden? Ja, das können Sie, aber die Existenz von Delta macht das Dokument des Benutzers feingranularer, leichter zu pflegen und nachvollziehbarer. Wenn A und B gleichzeitig ein Dokument bearbeiten und A 10 Zeichen in der zweiten Zeile löscht, muss nicht der gesamte Dokumentinhalt aktualisiert werden. Stattdessen muss A nur eine Aktion übermitteln, um sein eigenes Verhalten zu synchronisieren, und B muss nur den Konflikt lösen und dann zusammenführen. Obwohl die Delta-Wartung die Logik komplizierter macht, bietet ihre Existenz auch mehr Möglichkeiten zur Dokumenterweiterung.

5. Editor-Rendering und Aktualisierungsprozess

Es gibt drei Möglichkeiten, den Inhalt zu ändern:

1. Initialisieren Sie den Editorinhalt: Initialisieren Sie den Aufruf von quill.pasteHTML und geben Sie ihn nach der HTML-Filterung und -Analyse an das Bearbeitungsfeld zurück.

2. Eingabeereignis: Benutzereingaben und Bearbeitungsvorgänge werden vom MutationObserver überwacht und verarbeitet, um das Delta zu aktualisieren.

3. API-Aufruf: Rufen Sie die intern bereitgestellte API über die Änderungsmethode auf und rufen Sie dann die Methode der globalen Scroll-Instanz auf, um sie zu ändern.

2. Fügen Sie einen benutzerdefinierten HTML-Block ein

Da die Artikelinhalte immer vielfältiger werden, besteht die Notwendigkeit, Karten, Musikplayer, Werbetafeln usw. in Artikel einzufügen, was von uns erfordert, den Rich-Text-Editor um weitere Funktionen zu erweitern. Gleichzeitig müssen wir aber auch einen guten Schutz vor XSS-Angriffen bieten.

Gemäß dem ersten Teil müssen wir einen benutzerdefinierten HTML-Block einfügen und Quill muss ihn erkennen können. Sie haben sicher schon daran gedacht, wir müssen einen Blot anpassen. Durch die Definition der Blot-Methode kann Quill unsere HTML-Blockanzeige während der Initialisierung erkennen und verhindert außerdem, dass Quill beim Einfügen von HTML-Blöcken schmutziges HTML herausfiltert.

Die Registrierungs-Blot-Methode läuft wie folgt ab:

Standardfunktion exportieren (Quill) {
  // BlockEmbed aus dem Quellcode importieren
  const BlockEmbed = Quill.import('blots/block/embed');
  // Definiere eine neue Blot-Typklasse AppPanelEmbed extends BlockEmbed {
    statisch erstellen(Wert) {
      const node = super.create(Wert);
      node.setAttribute('Inhalt editierbar', 'false');
      node.setAttribute('Breite', '100%');
      // Benutzerdefiniertes HTML festlegen
      node.innerHTML = this.transformValue(Wert)
      Rücklaufknoten;
    }

    statischer Transformwert(Wert) {
      let handleArr = Wert.split('\n')
      handleArr = handleArr.map(e => e.replace(/^[\s]+/, '')
        .replace(/[\s]+$/, ''))
      Rückgabewert handleArr.join('')
    }

    //Gibt den Wert des Knotens selbst zurück, um die Operation rückgängig zu machen static value(node) {
      node.innerHTML zurückgeben
    }
  }
  // Blotname
  AppPanelEmbed.blotName = "AppPanelEmbed";
  // Der Klassenname wird verwendet, um dem Blot-Namen zu entsprechen. AppPanelEmbed.className = 'embed-innerApp';
  // Tag-Typ anpassen AppPanelEmbed.tagName = 'div';
  Quill.register(AppPanelEmbed, true);
}

Als nächstes müssen Sie es nur so aufrufen, um einen benutzerdefinierten HTML-Block in den Editor einzufügen:

quill.insertEmbed(quill.getSelection().index || 0, 'AppPanelEmbed', `
          <div Klasse="App-Kartenheader">     
              Benutzerdefinierter Paneltitel</div>
          <div Klasse="App-Karteninhalt">     
              Panel-Inhalt anpassen</div>
          <div Klasse="App-Kartenfußzeile">     
              Fußzeile
          </div>
      `);

Die Anforderungen an das Parameterformat lauten wie folgt:

insertEmbed(Index: Zahl, Typ: String, Wert: beliebig, Quelle: String \= 'API'): Delta

Dies ist nur ein einfaches Beispiel. Wenn Sie die Funktionen des benutzerdefinierten Blots erweitern möchten, können Sie hier nachlesen: https://github.com/quilljs/parchment#blots

Da das contenteditable-Attribut freigegeben ist, müssen wir, um XSS-Angriffe zu verhindern, eine spezielle Filterung für dieses Attribut durchführen. Hier nehmen wir die Verarbeitung des XSS-Moduls als Beispiel:

handleWithXss(Inhalt) {
      const Optionen = {
        weiße Liste: {
         ...
          div: ['Klasse', 'Stil', 'Daten-ID', 'Inhalt editierbar'],
         ...
        },
        css: {
          weiße Liste: {
            Farbe: echt,
            'Hintergrundfarbe': wahr,
            'max-width': wahr,
          },
        },
        stripIgnoreTag: wahr,
        onTagAttr: (Tag, Name, Wert, isWhiteAttr) => {
          // Verarbeite contenteditable für div, wenn (isWhiteAttr && tag === 'div' && name === 'contenteditable') {
            gibt „contenteditable=‚false‘“ zurück;
          }
        },
      } // Benutzerdefinierte Regeln const myxss = new xss.FilterXSS(Optionen)
      gibt myxss.process(Inhalt) zurück
    }

Dies ist das Ende dieses Artikels über das Einfügen von benutzerdefinierten HTML-Datensätzen in den Quill-Editor. Weitere relevante benutzerdefinierte HTML-Inhalte für den Quill-Editor finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!