Stile importieren

Füllt die Stilmenüs des Editors mit den CSS-Klassen, über die Ihre Website bereits verfügt. MitimportStyles: true, liest der Editor die Stylesheets der Seite und findet Klassenselektoren wiep.ledeoderimg.roundedund fügt jede Klasse dem Absatz-, Inline-, Bild- oder Linkstil-Menü hinzu, sodass Autoren die Klassen Ihres Designsystems anstelle der Platzhalterklassen auswählen.

Schalten Sie es ein

Die Funktion ist dieimportstyles.jsPlugin (auch inplugins/all_plugins.js). Es ist ausgeschaltet, bis Sie es einstellenimportStyles: true. Es hat keinen eigenen Knopf; es füllt die Menüs dahinterparagraphstyleUndinlinestyle(Hauptsymbolleiste),imagestyle(Bildsymbolleiste) undlinkstyle(Link-Symbolleiste).

Das Stylesheet in diesem Beispiel:

p.lede { font-size: 1.25em; color: #334155; }
blockquote.pull-quote { border-left: 4px solid #2563eb; padding-left: 12px; font-style: italic; }
span.badge { background: #fde68a; padding: 0 4px; border-radius: 4px; }
.highlight { background: #dcfce7; }
img.rounded { border-radius: 12px; }
a.cta { background: #2563eb; color: #fff; padding: 4px 10px; border-radius: 6px; }
article .card p.note:hover { color: #0f766e; }
p.lede.wide { max-width: none; }
.js-toggle { display: none; }
@media (min-width: 600px) { h2.section-title { letter-spacing: .02em; } }

<link rel="stylesheet" href="site.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"><p>Intro paragraph that should become a lede.</p></div>
<script>
var editor = new RichTextEditor("#editor", {
  toolbar: "full",
  contentCssUrl: "site.css",   // so the classes also look right inside the editor
  importStyles: true
});
</script>

Dieses Stylesheet gab diese Menüs (editor.getImportedStyles()gemeldetapplied: { imageStyles: 1, linkStyles: 1, inlineStyles: 2, paragraphStyles: 5 }):

Speisekarte	Importierte Einträge
Absatzstile	Lede, Pull Quote, Hervorhebung, Notiz, Abschnittstitel
Inline-Stile	Abzeichen, Highlight
Bildstile	Gerundet
Link-Stile	Cta

Die Auswahl von Lede im ersten Absatz ist gerettet<p class="lede">Intro paragraph that should become a lede.</p>.

Wie Klassen sortiert sind

• Nur der letzte Teil eines Selektors zählt:article .card p.note:hovergibtnotefür Absätze. Pseudoklassen und Attributfilter werden ignoriert.
• Das Element vor der Klasse bestimmt das Menü:img, figure, pictureGehen Sie zu den Bildstilen.aum Stile zu verknüpfen;span, strong, b, em, i, code, mark, small, sub, sup, abbr, q, citezu Inline-Stilen;p, div, Überschriften,blockquote, Listen,pre, Abschnitte und Tabellenzellen bis hin zu Absatzstilen. Eine Klasse ohne Element (.highlight) gilt sowohl für Inline- als auch für Absatzstile. Andere Elemente werden übersprungen.
• Ein Selektor mit zwei Klassen auf einem Element (p.lede.wide) wird übersprungen, da keine einzelne Klasse mit ihr übereinstimmt.
• Klassen drinnen@mediaUnd@supportsgefunden werden.
• Die Bezeichnung besteht aus dem Klassennamen:pull-quotewird"Pull Quote". Ein führendermy-cls-, u-oderc-wird fallen gelassen.
• Die eigenen Stylesheets des Herausgebers werden nie gelesen (alles aus dem/richtexteditor/Ordner und Stile, die der Editor einfügt).

Optionen

Option	Standard	Was es bewirkt
importStyles	false	Schaltet den Import ein.
importStylesSheets	null(alle lesbaren Blätter)	Welche Blätter gelesen werden sollen: eine Zeichenfolge, die mit der URL des Blattes abgeglichen wird ("site.css"), ein RegExp (/theme/) oder eine Funktion, die das erhältCSSStyleSheetund gibt wahr oder falsch zurück.
importStylesExclude	/^(rte[-_]|ck[-_]|cke[-_]|mce[-_]|tox[-_]|js[-_]|is[-_]|has[-_])/i	Klassennamen wurden nie importiert. Ein RegExp, eine Funktion des Klassennamens oder ein String-Präfix. Die Standardeinstellung wurde übersprungen.js-toggleüber.
importStylesFilter	null	function (className, selectorText, menu). Zurückkehrenfalseum eine Klasse zu überspringen oder eine Zeichenfolge, die als Bezeichnung verwendet werden soll.menuIst"paragraphStyles", "inlineStyles", "imageStyles"oder"linkStyles".
importStylesReplace	false	false fügt die importierten Klassen nach den konfigurierten hinzu; true ersetzt sie.
importStylesLimit	100	Die meisten Einträge pro Menü. Zusätzliche Klassen werden mit einer Konsolenwarnung gelöscht. 0 bedeutet keine Begrenzung.

Um beispielsweise eine Klasse auszublenden und eine andere umzubenennen:

importStylesFilter: function (cls, selector, menu) {
  if (cls === "highlight") return false;
  if (cls === "lede") return "Lead paragraph";
}

API

• editor.getImportedStyles() gibt zurück, was der letzte Import bewirkt hat: { applied, truncated, droppedCount, unreadableSheets, documentsScanned, replaced }.
• editor.scanStylesheetClasses(options) listet auf, was importiert werden würde, als { classes: [{ cls, tag, selector }], unreadableSheets, documents }, ohne die Menüs zu ändern. Es funktioniert, wenn importStyles ausgeschaltet ist.
• editor.importStyles(options) führt den Import erneut aus, beispielsweise nach dem Laden eines anderen Stylesheets. Optionen verwenden die Kurznamen: { sheets, exclude, filter, replace, limit }.

Wissenswertes

• Stylesheets anderer Herkunft können nicht gelesen werden. Der Browser blockiert deren Regeln; Sie werden in unreadableSheets gezählt und übersprungen, und der Rest des Scans geht weiter. Im obigen Test wurde eine von einem zweiten Ursprung geladene Kopie desselben Stylesheets als unreadableSheets: 1 gemeldet. Stellen Sie das Stylesheet, dessen Klassen Sie möchten, aus Ihrer eigenen Domain bereit.
• Beide Dokumente werden gelesen: die Seite und der Bearbeitungsbereich des Editors (wo contentCssUrl geladen wird). Der Import wird beim Start des Editors ausgeführt und erneut, sobald er fertig ist.
• Übergeben Sie Ihre eigenen Listen, wenn die Seite mehrere Editoren hat. In 2.6.12 werden mit importStylesReplace: false die importierten Klassen zu den gemeinsamen Standardlisten hinzugefügt (RTE_DefaultConfig.paragraphStyles und die anderen), sodass ein später auf derselben Seite erstellter zweiter Editor sie auch dann anzeigt, wenn importStyles deaktiviert ist. Durch das Festlegen von paragraphStyles, inlineStyles, imageStyles und linkStyles in der Konfiguration jedes Editors oder importStylesReplace: true werden sie getrennt.
• Der gespeicherte HTML-Code trägt nur den Klassennamen (class="lede"). Die Seite, die den Inhalt anzeigt, benötigt dasselbe Stylesheet und ein HTML-Bereinigungsprogramm muss class zulassen.
• Schrägen Sie auf einer Utility-CSS-Seite (Hunderte von Einzweckklassen) den Import mit importStylesSheets oder importStylesFilter ein, anstatt das Limit zu erhöhen.

Verwandt: Demo für Absatz- und Inline-Stile, Konfigurationsreferenz.