Shadow DOM

Ermöglicht die Ausführung des Editors innerhalb eines Schattenstamms, beispielsweise innerhalb Ihrer eigenen Webkomponente oder eines Mikro-Frontends. Seiten-Stylesheets reichen nicht bis in ein Schattenstammverzeichnis, sodass der Editor dort ohne Hilfe nicht formatiert ist. Dieses Plugin kopiert die eigenen Stylesheets des Editors in das Schattenstammverzeichnis, das es enthält, und kopiert weiterhin diejenigen, die Plugins später hinzufügen.

Ein Editor im Schattenstamm eines benutzerdefinierten Elements mit einer gestalteten Symbolleiste und dem daneben geöffneten Dialogfeld „Link einfügen“ mit den Feldern „URL“ und „Text“, „In neuem Tab öffnen“, „Abbrechen“ und „Einfügen“. — Ein Editor, der im Schattenstamm eines benutzerdefinierten Elements erstellt wurde. Das Dialogfeld „Link einfügen“ wird geöffnet. Beide sind gestylt.

Schalten Sie es ein

Die Funktion ist dieshadowdom.jsPlugin (auch inplugins/all_plugins.js). Laden Sie das Stylesheet des Editors wie gewohnt in die Seite und erstellen Sie den Editor auf einem Element im Schattenstamm; Den Rest erledigt das Plugin. Es gibt keinen Knopf.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<note-editor id="host"></note-editor>
<script>
class NoteEditor extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: "open" });
    root.innerHTML = '<div class="box"><p>Text inside a <b>shadow root</b>.</p></div>';
    this.editor = new RichTextEditor(root.querySelector(".box"), { toolbar: "basic", height: "220px" });
  }
}
customElements.define("note-editor", NoteEditor);
</script>

Das Fertige<rich-text-editor>Element inrte-webcomponent.jsverwendet das gleiche Plugin: füge das hinzushadowAttribut und mountet den Editor in seinem eigenen Schattenstammverzeichnis.

<script src="/richtexteditor/rte-webcomponent.js"></script>
<rich-text-editor shadow toolbar="basic" height="220px"><p>Hello</p></rich-text-editor>

Wennshadowdom.jsnicht geladen ist, gibt dieses Element eine Konsolenwarnung aus und verbleibt im Light-DOM, anstatt unformatiert gerendert zu werden.

Optionen

Option	Standard	Was es bewirkt
`shadowStyleAdoption`	`true`	Kopieren Sie die Stylesheets des Editors in das Schattenstammverzeichnis.`false`schaltet das Kopieren aus.
`shadowStyleSources`	`null`	Zusätzliche Stylesheet-URLs zum Hinzufügen zum Schattenstamm, einer Zeichenfolge oder einem Array für Ihre eigenen Skin-Überschreibungen.

Was wird kopiert

<link rel="stylesheet"> Elemente, die aus dem Ordner bereitgestellt werden, aus dem rte.js geladen wurde, oder deren Dateinamen vom Editor stammen (rte_theme, rte_mobile, richtexteditor_content, richtexteditor_preview, aitoolkit). Sie werden als neue <link>-Elemente mit derselben URL neu erstellt, sodass sie aus dem Browser-Cache stammen.
<style>-Elemente, deren ID mit rte- oder __rte (die Stile der Plugins) beginnt, und <style>-Elemente ohne ID, deren CSS die Selektoren des Editors erwähnt, so injizieren Bundler wie Vite ein importiertes Theme.
Stylesheets der Seite übernommen mit document.adoptedStyleSheets.

Es wird nichts anderes von der Seite kopiert, sodass Ihre Komponente ihre Kapselung behält. Jede Kopie trägt data-rte-adopted="1". Auf der Testseite oben wurden 9 Stylesheets kopiert (das Design, das AI-Toolkit-Stylesheet und die <style>-Elemente der Plugins) und die Symbolleiste war 41 Pixel hoch. Mit shadowStyleAdoption: false war es 7.561 Pixel hoch, eine Spalte mit nicht gestalteten Schaltflächen.

Das Plugin überwacht den <head> der Seite, sodass ein Plugin-Stil, der nach dem Start hinzugefügt wird, wenn das Bedienfeld zum ersten Mal geöffnet wird, ebenfalls kopiert wird. Dialoge und Menüs werden innerhalb des Elements des Editors erstellt, befinden sich also im Schattenstamm und verwenden die kopierten Stile.

API

editor.isInShadowDom() – true, wenn sich der Editor innerhalb eines Schattenstamms befindet.
editor.getShadowRoot() – diese Schattenwurzel oder null.
editor.getAdoptedStyleCount() – wie viele Stylesheets kopiert wurden (9 oben).
editor.adoptEditorStyles(target) – Kopieren Sie die Stylesheets des Editors in ein anderes Stammverzeichnis, beispielsweise ein zweites Schattenstammverzeichnis, das eine Vorschau anzeigt. Ohne Argument wird das eigene Schattenstammverzeichnis des Editors verwendet.

Wissenswertes

Der Bearbeitungsbereich ist ein Iframe, sodass das eigene CSS des Dokuments wie gewohnt darin geladen wird (contentCssUrl); Bei diesem Plugin geht es nur um die Symbolleiste, Menüs und Dialoge des Editors.
Außerhalb eines Schattenstamms macht das Plugin nichts und erstellt keinen Beobachter.
Ihre eigenen Überschreibungen des Erscheinungsbilds des Editors, die im Stylesheet der Seite gespeichert sind, reichen nicht bis zum Schattenstamm. Listen Sie sie in shadowStyleSources auf oder fügen Sie sie selbst in das Schattenstammverzeichnis ein.
Der gespeicherte HTML-Code ist nicht betroffen; getHTMLCode() hat <p>Text inside a <b>shadow root</b>.</p> zurückgegeben.

Verwandt: Schnellstart, Formularvalidierung.