Rich-Text-Editor – Referenz (Alle Nutzenden)

INHALTSVERZEICHNIS

• Einführung
• 1 Übersicht
• 2 Voraussetzungen und Anforderungen
• 3 Erste Schritte
  • 3.1 Den Editor öffnen
  • 3.2 Die vollständige Symbolleiste einblenden
• 4 Funktionen und Möglichkeiten
  • 4.1 Werkzeuge zur Textformatierung
  • 4.2 Textausrichtung und Struktur
  • 4.3 Symbole zur Medienintegration
  • 4.4 Weitere Funktionen
  • 4.5 Anzeigeoptionen
• 5 Schritt-für-Schritt-Anleitungen
  • 5.1 Medieninhalte einbetten
  • 5.2 Tabellen einfügen
  • 5.3 Audio und Video aufnehmen
  • 5.4 Mathematische Formeln erstellen
• 6 Einstellungen und Anpassung
  • 6.1 Sprachauswahl
  • 6.2 Quellcode-Ansicht
• 7 Technische Informationen
  • 7.1 Editorversionen
  • 7.2 Verhalten beim Einbetten von Links
  • 7.3 Unterstützte Medientypen
• 8 HTML- und CSS-Filterung
  • 8.1 Zulässige HTML-Code-Stufen
  • 8.2 Stark eingeschränkt
  • 8.3 Eingeschränkt
  • 8.4 Weniger eingeschränkt
  • 8.5 CSS und Inline-Formatierung
  • 8.6 Eingebettete Stylesheets
  • 8.7 Was mit nicht unterstützten Inhalten geschieht
  • 8.8 Bildbreiten und responsive Bilder
  • 8.9 Zusätzliches CSS- und Elementverhalten
  • 8.10 Was das für Ihre Inhalte bedeutet
• 9 Problemlösung
  • 9.1 Häufige Probleme
  • 9.2 Fehlende Symbolleistenfunktionen

Einführung

Der Rich-Text-Editor ist ein Werkzeug zur Erstellung von Inhalten, das in itslearning zum Formatieren von Text und zum Einbinden von Medien verwendet wird. Nutzen Sie den Rich-Text-Editor, wenn Sie Kursinhalte, Aufgaben, Diskussionen, Mitteilungen oder andere textbasierte Materialien erstellen. Der Editor bietet Textverarbeitungsfunktionen sowie Werkzeuge zum Einbetten von Videos, zum Aufnehmen von Audio, zum Einfügen mathematischer Formeln und zum Verlinken von Kursressourcen.

1 Übersicht

Lehrkräfte und Lernende mit den entsprechenden Kursberechtigungen können den Rich-Text-Editor nutzen, wenn sie Inhalte erstellen oder bearbeiten. Der Editor wird an zahlreichen Stellen der Plattform verwendet und erscheint je nach Aufrufort in einer vollständigen oder einer reduzierten Version.

2 Voraussetzungen und Anforderungen

Erforderliche Nutzerberechtigungen:

• Bearbeitungsrechte im entsprechenden Kursbereich (je nach Bereich unterschiedlich)
• Für das Hochladen von Medien: ausreichendes Speicherkontingent

System- und Browseranforderungen:

• Aktueller Webbrowser (Chrome, Firefox, Safari, Edge)
• Zugriff auf das Mikrofon (für Audioaufnahmen)
• Zugriff auf die Kamera (für Videoaufnahmen)
• Stabile Internetverbindung zum Hochladen von Medien

3 Erste Schritte

3.1 Den Editor öffnen

Der Rich-Text-Editor wird automatisch angezeigt, wenn Sie in itslearning Inhalte erstellen oder bearbeiten. Sie begegnen ihm an zahlreichen Stellen der Plattform, an manchen Stellen kann jedoch eine neuere Version mit weniger Optionen angezeigt werden.

• Kursinhaltsseiten
• Aufgaben erstellen
• Diskussionsbeiträge
• Mitteilungen (neue, vereinfachte Version)
• Nachrichten (neue, vereinfachte Version)

3.2 Die vollständige Symbolleiste einblenden

In manchen Fällen sehen Sie zunächst eine reduzierte Version des Editors, in der nicht alle Funktionen angezeigt werden.

So greifen Sie auf alle Editorfunktionen zu:

1. Suchen Sie in der Symbolleiste nach der Schaltfläche „Weitere Optionen“.
2. Klicken Sie auf „Weitere Optionen“, um die ausgeblendeten Symbole einzublenden.

Die vollständige Symbolleiste zeigt dann alle verfügbaren Bearbeitungsfunktionen an.

4 Funktionen und Möglichkeiten

Beachten Sie, dass nicht alle Funktionen jederzeit allen Nutzenden zur Verfügung stehen. Das kann von der Konfiguration Ihrer itslearning-Plattform abhängen.

4.1 Werkzeuge zur Textformatierung

Der erste Abschnitt der Symbolleiste enthält die üblichen Funktionen zur Textformatierung. Diese Symbole und Funktionen kennen Sie vermutlich bereits aus anderen Textverarbeitungsprogrammen.

Verfügbare Formatierungsoptionen:

• Schriftart
• Textgröße (Normal, Überschrift usw.)
• Fett, Kursiv, Unterstrichen
• Textfarbe
• Hintergrundfarbe
• Sonderzeichen (Ω)
• Textausrichtung (linksbündig, zentriert, rechtsbündig, Blocksatz)

4.2 Textausrichtung und Struktur

Der nächste Abschnitt bietet Werkzeuge zur Strukturierung Ihrer Inhalte.

Strukturfunktionen:

• Tiefgestellt (Text unter die Zeile setzen)
• Hochgestellt (Text über die Zeile setzen)
• Einzug vergrößern
• Einzug verkleinern
• Nummerierte Listen
• Aufzählungszeichen
• Sprachdefinition für Textabschnitte

4.3 Symbole zur Medienintegration

Die Symbolleiste enthält zahlreiche Symbole zur Einbindung unterschiedlicher Medien- und Inhaltstypen.

Symbol	Funktion
	Anker: Setzt eine Markierung („Anker“) im Text, auf die Sie direkt mit einem Link verweisen können.
	Link: Fügt einen Link ein, zum Beispiel zu einer anderen Webseite oder zu einem Anker. Wenn Sie einen Link einfügen, versucht der Editor, den Inhalt hinter diesem Link einzubetten. Es gibt drei mögliche Ergebnisse: Ein Einbettungscode kann automatisch abgerufen werden (über „Einbetten“). Hinter dem Link gibt es keinen Einbettungscode, aber der Editor kann anhand der Metadaten der Seite ein Objekt erstellen. Es kann kein Objekt erstellt werden, und der Link wird als normaler Link hinzugefügt.
	Tabelle: Fügt eine Tabelle ein.
	Smiley: Öffnet eine Auswahl an Smileys, die Sie in den Text einfügen können.
	Baum-Link: Fügt einen Link zu einer Ressource in dem Kurs ein, in dem Sie sich befinden.
	Datei aus „Meine Web-Dateien“: Setzt einen Link zu einer Datei in Ihrem persönlichen Speicherbereich in itslearning.
	Bild: Fügt ein Bild von Ihrem Computer oder aus Ihren Dateien in itslearning ein.
	Audioaufnahme: Hier können Sie Audio aufnehmen oder eine Audiodatei hochladen.
	Videoaufnahme: Hier können Sie ein Video aufnehmen oder eine Videodatei hochladen.
	iMathEQ-Formeleditor: Fügt mathematische Symbole und Formeln ein.
	Video einbetten: Hier können Sie ein Video von einer anderen Webseite einbetten.
	Teams-Besprechung: Hier können Sie eine Teams-Besprechung für Ihren Kurs erstellen und den Link dazu auf dieser Seite hinzufügen.
	Google Meet: Hier können Sie einen Meet-Raum für Ihren Kurs erstellen und den Link dazu auf dieser Seite hinzufügen.
	Erweiterungsbibliothek: Hier können Sie auf zusätzliche Funktionen zugreifen, die für Ihre Plattform aktiviert wurden.

4.4 Weitere Funktionen

Der nächste Abschnitt der Symbolleiste bietet:

• Rückgängig (Aktionen im Editorfenster zurücknehmen)
• Wiederholen (Aktionen erneut ausführen)
• Kurzbefehle für Ausschneiden, Kopieren und Einfügen

4.5 Anzeigeoptionen

Die letzten Symbole sind:

• Die Schaltfläche „Quellcode“, die Ihre Inhalte im HTML-Code-Format anzeigt
• Die Schaltfläche zur Prüfung der Barrierefreiheit
• Der Vollbild-Editor, der besonders auf kleineren Bildschirmen nützlich ist

5 Schritt-für-Schritt-Anleitungen

5.1 Medieninhalte einbetten

Ziel: Externe Video- oder Medieninhalte hinzufügen.

Schritte:

1. Kopieren Sie die URL des Videos oder Medieninhalts.
2. Klicken Sie auf das Symbol „Link“ oder das Symbol „Video einbetten“.
3. Fügen Sie die URL ein.
4. Der Editor versucht, den Inhalt automatisch einzubetten.
5. Wenn das Einbetten fehlschlägt, erscheint der Link als normaler Link.

Ergebnis: Eingebettete Medieninhalte, die direkt auf Ihrer Seite angezeigt werden, oder ein Link zu externen Inhalten.

5.2 Tabellen einfügen

Ziel: Eine strukturierte Tabelle zur Darstellung von Daten erstellen.

Schritte:

1. Klicken Sie auf das Symbol „Tabelle“.
2. Wählen Sie die Anzahl der Zeilen und Spalten aus.
3. Klicken Sie, um die Tabelle einzufügen.
4. Tragen Sie Ihre Inhalte ein.
5. Passen Sie die Formatierung bei Bedarf über die Tabelleneigenschaften an.

Ergebnis: Eine formatierte Tabelle zur Strukturierung von Informationen.

5.3 Audio und Video aufnehmen

Ziel: Aufgezeichnete Inhalte direkt in itslearning erstellen.

Für Audioaufnahmen:

1. Klicken Sie auf das Symbol „Audioaufnahme“.
2. Erlauben Sie den Zugriff auf das Mikrofon, falls Sie dazu aufgefordert werden.
3. Klicken Sie auf „Aufnehmen“ und sprechen Sie.
4. Klicken Sie auf „Stopp“, wenn Sie fertig sind.
5. Speichern Sie Ihre Aufnahme oder laden Sie sie hoch.

Für Videoaufnahmen:

1. Klicken Sie auf das Symbol „Videoaufnahme“.
2. Erlauben Sie den Zugriff auf Kamera und Mikrofon, falls Sie dazu aufgefordert werden.
3. Klicken Sie auf „Aufnehmen“.
4. Klicken Sie auf „Stopp“, wenn Sie fertig sind.
5. Speichern Sie Ihre Aufnahme oder laden Sie sie hoch.

Ergebnis: Eingebettete Audio- oder Videoinhalte, die direkt in itslearning erstellt wurden.

5.4 Mathematische Formeln erstellen

Ziel: Mathematische Notation und Formeln einfügen.

Schritte:

1. Klicken Sie auf das Symbol „iMathEQ-Formeleditor“.
2. Erstellen Sie Ihre Gleichung in der Oberfläche des Formeleditors.
3. Klicken Sie auf „Einfügen“, wenn Sie fertig sind.

Ergebnis: Professionelle mathematische Notation, die in Ihren Inhalten angezeigt wird.

6 Einstellungen und Anpassung

6.1 Sprachauswahl

Legen Sie fest, in welcher Sprache bestimmte Textabschnitte verfasst werden. Das unterstützt die Rechtschreibprüfung und die Funktionen zur Barrierefreiheit.

So legen Sie die Sprache fest:

1. Markieren Sie den Text.
2. Wählen Sie die Sprache im Sprachmenü im Bereich der Textausrichtung aus.
   
3. Die Rechtschreibprüfung verwendet für diesen Text die ausgewählte Sprache.

6.2 Quellcode-Ansicht

Fortgeschrittene Nutzende können den HTML-Quellcode direkt ansehen und bearbeiten.

So rufen Sie die Quellcode-Ansicht auf:

1. Klicken Sie ganz rechts in der Symbolleiste auf die Schaltfläche „Quellcode“.
2. Sehen Sie sich den HTML-Code an oder bearbeiten Sie ihn.
3. Klicken Sie erneut auf „Quellcode“, um zum visuellen Bearbeitungsmodus zurückzukehren.

Anwendungsfälle:

• Feinabstimmung der Formatierung
• Fehlerbehebung bei Darstellungsproblemen
• Sauberen HTML-Code zur Verwendung an anderer Stelle kopieren

7 Technische Informationen

7.1 Editorversionen

Der Rich-Text-Editor kann je nach Kontext in itslearning in einer reduzierten oder einer vollständigen Version erscheinen. Die reduzierte Version zeigt die wichtigsten Formatierungsfunktionen, die vollständige Version alle verfügbaren Werkzeuge.

7.2 Verhalten beim Einbetten von Links

Beim Einfügen von URLs geht der Editor in dieser Reihenfolge vor:

1. Erster Versuch: Einbettungscode automatisch abrufen.
2. Zweiter Versuch: Ein Objekt auf Grundlage der Seitenmetadaten erstellen.
3. Letzte Alternative: Als normalen Link anzeigen.

Dieses Verhalten stellt sicher, dass Inhalte optimal angezeigt werden, wenn das Einbetten unterstützt wird, und dass die Funktionalität erhalten bleibt, wenn es nicht unterstützt wird.

7.3 Unterstützte Medientypen

Der Editor unterstützt:

• Gängige Web-Videoformate durch Einbetten
• Audioaufnahmen in gängigen Formaten (MP3, M4A)
• Videoaufnahmen in gängigen Formaten (MP4, WebM)
• Bilder (JPEG, PNG, GIF)
• Externe Inhalte von unterstützten Plattformen (YouTube, Vimeo usw.)

8 HTML- und CSS-Filterung

Rich-Text-Inhalte werden anderen Nutzenden als Teil der itslearning-Oberfläche angezeigt. Uneingeschränktes HTML und CSS könnte dazu verwendet werden, Skripte oder andere aktive Inhalte auszuführen, Inhalte aus nicht vertrauenswürdigen externen Quellen zu laden, Inhalte über Schaltflächen, Links oder andere Bedienelemente zu legen, Teile der itslearning-Oberfläche zu verbergen oder nachzuahmen, das Layout außerhalb des Inhaltsbereichs der Autorin oder des Autors zu verändern oder Nutzende über externe Ressourcen zu verfolgen.

Aus diesem Grund prüft itslearning HTML-Elemente, Attribute und CSS, wenn Inhalte gespeichert werden. Die Filterung gilt für Inhalte, die mit der Symbolleiste erstellt, in der Quellcode-Ansicht eingegeben, aus einer anderen Anwendung eingefügt oder aus einem anderen System importiert wurden.

8.1 Zulässige HTML-Code-Stufen

Die Stufen bauen aufeinander auf:

• „Eingeschränkt“ umfasst die Elemente, die bei „Stark eingeschränkt“ verfügbar sind.
• „Weniger eingeschränkt“ umfasst die Elemente, die bei „Eingeschränkt“ verfügbar sind.

8.2 Stark eingeschränkt

Zulässige Elemente:

Zulässige Attribute: Keine.

Das bedeutet, dass „Stark eingeschränkt“ Folgendes nicht beibehält:

• Inline-Formatierung
• Klassen oder IDs
• Sprach- oder Titelattribute
• Bildabmessungen
• Links oder Linkziele
• Interne Datenattribute des Editors

Bilder, Tabellen, Überschriften, Links, Audio, Video und eingebettete Frames werden auf dieser Stufe entfernt.

8.3 Eingeschränkt

„Eingeschränkt“ umfasst alle Elemente der Stufe „Stark eingeschränkt“ und ergänzt die folgenden.

Medien und Links:

oembed, video, audio, source, img, a

Text und semantische Struktur:

abbr, address, article, aside, bdi, bdo, cite, code, del, details, dfn, figcaption, figure, ins, kbd, mark, meter, q, s, samp, section, summary, time, wbr, blockquote

Ruby-Annotationen:

ruby, rb, rp, rt, rtc

Tabellen:

table, caption, col, colgroup, thead, tbody, tfoot, tr, td, th

Listen:

ol, ul, dl, li, dt, dd

Container, Überschriften und Trennelemente:

span, div, h1, h2, h3, h4, h5, h6, hr

Textpositionierung und veraltete Formatierung:

sup, sub, big, small, font, align, vspace, hspace

Mathematische Inhalte:

math, mrow, mo, mtable, mtr, mtd, mi, mtet, munder, mn, mtext, mfrac, msubsup, munderover, mover, msup, msub, msqrt, mroot

Zulässige Attribute:

Medien, Links und eingebettete Inhalte:

controls, loop, preload, autoplay, muted, frameborder, sandbox, target, src, type, alt, title, allowfullscreen, mozallowfullscreen, webkitallowfullscreen

Abmessungen, Textrichtung, Tabellen und Listen:

hspace, width, height, align, vspace, border, dir, valign, colspan, cellspacing, cellpadding, rowspan, start

Formatierung und Sprache:

color, style, lang

Interne Attribute des Editors und der Inhalte:

data-link-id, data-link-target-element-id, data-richtextfile-id, data-richtextfile-tempfile-filerepoid, data-plugin-settings, data-mathml, data-tex

Linkziele mit href werden ebenfalls beibehalten. Linkziele werden getrennt von der begrenzten Attributliste behandelt und können zusätzlichen URL-Sicherheitsprüfungen unterliegen.

8.4 Weniger eingeschränkt

„Weniger eingeschränkt“ umfasst alle Inhalte der Stufe „Eingeschränkt“ und erlaubt zusätzlich eingebettete Frames mit iframe.

Außerdem werden die folgenden Attribute ergänzt:

class, id, size, face, font, data-slideshow-settings

Dies ermöglicht:

• Klassen und IDs bei beibehaltenen Inhalten
• Zusätzliche veraltete Schriftformatierung
• Diashow-Einstellungen, die durch unterstützte Editorfunktionen erstellt werden
• Eingebettete Frames

8.5 CSS und Inline-Formatierung

„Stark eingeschränkt“ entfernt das gesamte Inline-Style-Attribut.

„Eingeschränkt“ und „Weniger eingeschränkt“ behalten die Inline-Formatierung bei, die Inhalte werden jedoch durch einen separaten CSS-Sicherheitsfilter geleitet.

Beibehaltene CSS-Eigenschaften:

color, background-color, font-size, font-family, text-align, margin, margin-left, padding, border, border-collapse, border-spacing, width, height, max-width

Die folgenden Arten von Werten werden gegebenenfalls beibehalten:

• Pixelwerte
• Ganzzahlige und dezimale Prozentwerte
• Einheiten der Viewport-Breite
• Automatische Höhe
• Berechnete Breitenausdrücke
• Mehrfache Margin- und Padding-Werte
• Hexadezimale Farbwerte

Beispiele für responsive Bildformatierung, die bei „Eingeschränkt“ und „Weniger eingeschränkt“ beibehalten wird:

• Eine prozentuale Breite
• Eine maximale Breite von 100 Prozent
• Eine Breite von 100 Prozent
• Automatische Höhe

Entfernte CSS-Eigenschaften:

display, position, top, left, z-index, opacity, object-fit, aspect-ratio

Wenn alle Deklarationen in einem Inline-Style abgelehnt werden, kann das Element mit einem leeren Style-Attribut erhalten bleiben.

8.6 Eingebettete Stylesheets

Eingebettete Stylesheets und Style-Elemente werden bei „Stark eingeschränkt“, „Eingeschränkt“ und „Weniger eingeschränkt“ nicht unterstützt.

8.7 Was mit nicht unterstützten Inhalten geschieht

Das Ergebnis hängt von der Art des gefilterten Inhalts ab:

• Ein nicht unterstütztes Container-Element wird normalerweise entfernt, während sein Text erhalten bleibt.
• Ein nicht unterstütztes Bild oder ein anderes Element ohne untergeordneten Text kann vollständig verschwinden.
• Nicht unterstützte Attribute werden von einem ansonsten unterstützten Element entfernt.
• Nicht unterstützte CSS-Deklarationen werden aus einem ansonsten beibehaltenen Inline-Style entfernt.
• HTML-Kommentare werden entfernt.
• Reihenfolge der Attribute, Leerraum und leere boolesche Attribute können beim Speichern der Inhalte normalisiert werden.

8.8 Bildbreiten und responsive Bilder

Das Dialogfenster „Bildeigenschaften“ im vollständigen Editor akzeptiert numerische Werte für Breite und Höhe. Eine Option für prozentuale Breiten gibt es nicht.

Fortgeschrittene Nutzende können prozentuale Breiten über die Quellcode-Ansicht eingeben. Bei „Eingeschränkt“ und „Weniger eingeschränkt“ werden folgende Ansätze unterstützt:

• Breitenattribute auf Prozentbasis
• Inline-Breite auf Prozentbasis
• Maximale Breite von 100 Prozent
• Breite von 100 Prozent mit automatischer Höhe

„Stark eingeschränkt“ behält keine Bilder bei.

Die endgültige dargestellte Größe kann außerdem vom umgebenden Seitenlayout und vom Produkt-Stylesheet beeinflusst werden.

8.9 Zusätzliches CSS- und Elementverhalten

Zusätzlich beibehaltene CSS-Eigenschaften:

Ebenfalls unterstützt:

• Benannte CSS-Farben (zum Beispiel tomato, lightyellow), nicht nur Hexadezimalwerte
• currentColor
• rgba() und hsla(), einschließlich des Alphakanals (Transparenz)
• Zusätzliche Längeneinheiten: em, rem, pt, cm, ch (neben Pixelwerten, Prozentwerten und Einheiten der Viewport-Breite)

Zusätzlich entfernte CSS-Eigenschaften:

Hinweise zum Verhalten von Elementen und Attributen:

8.10 Was das für Ihre Inhalte bedeutet

Die vorstehenden Abschnitte beschreiben den Filter in technischen Begriffen. Dieser Abschnitt übersetzt dieselben Erkenntnisse in einfache Fragen dazu, was Sie tatsächlich erstellen können, ohne dass Sie Code lesen müssen.

9 Problemlösung

9.1 Häufige Probleme

Problem: Die Symbolleiste des Editors ist unvollständig oder es fehlen Funktionen

Lösung:

1. Suchen Sie nach der Schaltfläche „Weitere Optionen“.
2. Klicken Sie auf „Weitere Optionen“, um ausgeblendete Symbole einzublenden.
3. Wenn Funktionen weiterhin nicht verfügbar sind, prüfen Sie Ihre Berechtigungen für den Inhaltsbereich.

Problem: Eingefügte Inhalte werden mit unerwarteter Formatierung angezeigt

Lösung:

1. Prüfen Sie den HTML-Code in der Quellcode-Ansicht.
2. Fügen Sie Inhalte zunächst als reinen Text ein und formatieren Sie sie anschließend neu.
3. Verwenden Sie „Rückgängig“ (Strg+Z / Cmd+Z), wenn die Formatierung misslingt.

Problem: Video aus externer Quelle kann nicht eingebettet werden

Lösung:

1. Prüfen Sie, ob die Video-URL korrekt ist.
2. Prüfen Sie, ob die externe Plattform das Einbetten unterstützt.
3. Wenn das Einbetten fehlschlägt, funktioniert der Link weiterhin als normaler Link.
4. Alternative: Laden Sie Videodateien direkt hoch, wenn das Einbetten nicht möglich ist.

9.2 Fehlende Symbolleistenfunktionen

Problem: Symbole für die Erweiterungsbibliothek oder für Integrationen (Teams, Google Meet) sind nicht sichtbar

Mögliche Ursache: Diese Funktionen müssen von Ihrer Institution auf Plattformebene aktiviert werden.

Lösung: Wenden Sie sich an die itslearning-Administration, um zu klären, welche Funktionen für Ihre Plattform aktiviert sind.

Weitere Hilferessourcen

Haben Sie weitere Fragen? Wenden Sie sich zunächst an Ihre Schuladministration.

Hinweise zu Produktveröffentlichungen

Bleiben Sie über die neuesten Veröffentlichungen von itslearning informiert: https://itslearning.com/product-updates

Servicestatus

Prüfen Sie den aktuellen Status der itslearning-Dienste: https://status.itslearning.com/

Ideenportal

Teilen Sie Ihre Ideen und gestalten Sie die Zukunft von itslearning mit: https://ideas.itslearning.com/

Roadmap

Werfen Sie einen Blick auf unsere Roadmap: https://itslearning.com/global/roadmap/