Beiträge formatieren: Rich-Text-Editor, Bilder und Codeblöcke

Überblick

Jedes Thema und jede Antwort in Discussions wird im selben schlanken Rich-Text-Editor geschrieben. Er bietet die Formatierung, die ein Forum braucht – Hervorhebungen, Listen, Zitate, Codeblöcke, Links und eingebettete Bilder – und nichts, was einen Thread in eine Seitenlayout-Übung verwandeln würde. Der Text wird als HTML in der Spalte Body (Textkörper) der Listen Discussions Topics und Discussions Posts auf Ihrer Website gespeichert und sowohl beim Speichern als auch beim Anzeigen durch einen Sanitizer mit Zulassungsliste geleitet, sodass ein Beitrag niemals Skripts, Stile oder eingebettete Frames enthalten kann.

Dieser Artikel beschreibt die Symbolleiste, die Tastenkombinationen, Links, Zitate und Codeblöcke, die drei Wege, ein Bild einzufügen, sowie das, was der Sanitizer beibehält und entfernt.

Wo der Editor erscheint

• Im Formular New topic (Neues Thema) als Feld Describe the topic or question (Beschreiben Sie das Thema oder die Frage) unterhalb des Titels. Der Textkörper eines Themas ist optional; nur der Titel ist erforderlich.
• Am Ende eines Themas als Antwortfeld mit dem Platzhalter Write a reply... (Antwort schreiben...). Die Schaltfläche Post (Veröffentlichen) bleibt deaktiviert, solange das Feld leer ist, und wird aktiv, sobald es Text oder ein Bild enthält.
• Unter jeder Antwort, nachdem Sie auf Reply (Antworten) geklickt haben; der Editor trägt dann die Beschriftung Reply to (Antwort an), gefolgt vom Namen des Autors, und seine Schaltfläche Post ist deaktiviert, solange der Editor leer ist.
• Wenn Sie bei einer von Ihnen verfassten Antwort auf Edit (Bearbeiten) klicken (Moderatoren können jede Antwort bearbeiten). Der vorhandene Text wird in den Editor geladen, und Save (Speichern) speichert die neue Version; Save ist deaktiviert, solange der Editor leer ist.
• Wenn Sie bei einem Thema auf Edit (Bearbeiten) klicken. Der Autor kann ein Thema bearbeiten, solange es nicht gesperrt ist; Moderatoren können jedes Thema bearbeiten. Titel, Kategorie (wenn das Board Kategorien hat) und Textkörper werden direkt an Ort und Stelle geändert, der Textkörper in demselben Editor, und mit Save oder Cancel (Abbrechen) wird die Bearbeitung beendet.

Die Symbolleiste

Die Symbolleiste über dem Bearbeitungsbereich hat elf Schaltflächen. Zeigen Sie mit der Maus auf eine Schaltfläche, um ihren Namen und, sofern vorhanden, ihre Tastenkombination zu sehen.

Die Schaltflächen der Symbolleiste nehmen dem Text nicht den Fokus, sodass Sie auf eine Schaltfläche klicken und weiterschreiben können. Während ein Bild hochgeladen wird, erscheint am Ende der Symbolleiste ein kleiner Ladeindikator.

Tastenkombinationen

Andere Kombinationen – zum Beispiel Ctrl+Z zum Rückgängigmachen oder Ctrl+Shift+V zum Einfügen ohne Formatierung – verarbeitet der Browser wie in jedem bearbeitbaren Feld.

Links

1. Markieren Sie den Text, der zum Link werden soll (optional), und klicken Sie auf Link (Ctrl+K).
2. Geben Sie die Adresse in Link address ein oder fügen Sie sie ein und klicken Sie auf Insert (Einfügen) oder drücken Sie Enter.

War Text markiert, wird er zum Link. War nichts markiert, wird die Adresse selbst als Linktext eingefügt. Eine ohne Protokoll eingegebene Adresse (vitextra.com/support) wird als https://vitextra.com/support gespeichert. Der Editor akzeptiert http:-, https:-, mailto:- und websiterelative (/sites/...) Adressen, und jeder Link wird mit rel="noopener noreferrer" geschrieben.

Zitate und Codeblöcke

Quote (Zitat) wandelt den Absatz, in dem sich der Cursor befindet, in ein Blockzitat um. Es wird mit einem farbigen Balken links und leicht gedämpftem Text angezeigt – praktisch, um die Nachricht zu zitieren, auf die Sie antworten, oder einen Auszug aus einem Dokument.

Code block (Codeblock) wandelt den Absatz in einen vorformatierten Block um: nichtproportionale Schrift (Consolas unter Windows), schattierter Hintergrund und erhaltene Leerzeichen und Zeilenumbrüche. Lange Zeilen werden umbrochen, statt eine horizontale Bildlaufleiste zu erzeugen, sodass der Block auch auf dem Smartphone lesbar bleibt. Verwenden Sie ihn für PowerShell, Skripts, Konfigurationsfragmente, Protokollauszüge oder alles, bei dem es auf Einrückungen ankommt.

Um ein Zitat oder einen Codeblock zu verlassen, setzen Sie den Cursor hinein und klicken auf Clear formatting (Formatierung löschen), wodurch der Block wieder zu einem normalen Absatz wird; oder Sie drücken am Ende des Blocks zweimal Enter, wie in den meisten Editoren.

Bilder

Sie können ein Bild auf drei Wegen an beliebiger Stelle im Text platzieren:

• Insert image (Bild einfügen) in der Symbolleiste – öffnet die Dateiauswahl; Sie können mehrere Bilder auf einmal auswählen.
• Einfügen – kopieren Sie einen Screenshot oder ein Bild aus einer anderen Anwendung und drücken Sie im Editor Ctrl+V.
• Drag-and-drop – ziehen Sie eine oder mehrere Bilddateien von Ihrem Computer in den Bearbeitungsbereich.

Jedes Bild wird in die Dokumentbibliothek Discussions Assets der Website hochgeladen, in einen nach dem aktuellen Jahr benannten Ordner (2026, 2027, …), unter einem eindeutigen Dateinamen, der mit einem zeitbasierten Präfix beginnt, damit zwei Benutzer, die screenshot.png hochladen, sich nie gegenseitig überschreiben. Der Editor fügt das Bild dann an der Cursorposition ein, mit dem ursprünglichen Dateinamen als Alternativtext. Bilder werden in ihrer natürlichen Größe angezeigt und auf die Breite des Beitrags verkleinert, wenn sie breiter sind.

Einige weitere Details, die man kennen sollte:

• Bilder können im Editor nicht in der Größe verändert werden. Schneiden oder skalieren Sie das Bild vor dem Hochladen, wenn es kleiner erscheinen soll.
• Bilder in einem Beitrag sind für alle sichtbar, die die Bibliothek Discussions Assets lesen können; standardmäßig erbt sie wie die anderen Discussions-Listen die Berechtigungen der Website.
• Das Löschen einer Antwort oder eines Themas entfernt auch die darin verwendeten Bilder aus der Bibliothek Discussions Assets; beim Löschen eines Themas werden zudem seine Antworten und deren Bilder gelöscht. Die Bereinigung erfolgt nach bestem Bemühen und betrifft nur Dateien dieser Bibliothek, und ein Bild, das Sie beim Bearbeiten aus einem Beitrag entfernen, bleibt in der Bibliothek; ein Websitebesitzer kann die Bibliothek daher weiterhin jederzeit aufräumen.
• Die Bibliothek wird zusammen mit den anderen Listen erstellt. Wurde ein Board von einem früheren Preview-Build erstellt, fügt ein Moderator (ein Benutzer mit der Berechtigung Listen verwalten) die fehlenden Listen hinzu, indem er die Seite mit dem Webpart öffnet — mit oder ohne Bearbeitungsmodus; bis dahin meldet die Bildschaltfläche einen Fehler. Siehe KB10431. Bilder oder Anlagen lassen sich nicht hochladen.

Einfügen aus anderen Anwendungen

Wenn Sie formatierte Inhalte einfügen – aus Word, Outlook, einer Webseite, Teams –, behält der Editor die Struktur bei, die der Sanitizer zulässt (Absätze, Fett- und Kursivschrift, Listen, Links, Tabellen, Überschriften), und verwirft den Rest stillschweigend: Schriftarten, Farben, Größen, Ausrichtung, Inline-Stile und Klassen. Bilder, die mit dem eingefügten HTML als externe Links kommen, behalten ihre Adressen; als Dateien eingefügte Bilder werden wie oben beschrieben hochgeladen. Das Einfügen von reinem Text fügt ihn als reinen Text ein.

Was der Sanitizer beibehält

Dieselbe Zulassungsliste wird beim Speichern und beim Rendern eines Beitrags angewendet, sodass auch Inhalte bereinigt werden, die über das Listenformular geschrieben oder aus einer klassischen Diskussionsrunde importiert wurden.

Alles andere wird entfernt:

• script, style, iframe, object, embed, svg, math, template und noscript werden samt ihrem Inhalt entfernt, ebenso HTML-Kommentare.
• Jedes andere Tag (zum Beispiel font, video, form, input) wird entfernt, sein Text bleibt jedoch erhalten.
• Alle oben nicht aufgeführten Attribute – style, class, id, onclick und die übrigen Ereignishandler – werden verworfen.
• Ein Link oder ein Bild, dessen Adresse ein anderes Schema verwendet (javascript:, data: bei Links, file:), verliert dieses Attribut.

Jedes verbleibende a-Tag erhält rel="noopener noreferrer". Da style nie beibehalten wird, überleben Textfarbe, Hintergrundfarbe, Schriftfamilie, Schriftgröße und Ausrichtung nicht – egal, ob sie über eine Browsererweiterung eingegeben oder aus einem Dokument eingefügt wurden. Das ist beabsichtigt, damit Beiträge einheitlich aussehen und dem Design der Website folgen.