Wie man den HTML-Editor benutzt

HTML-Editor

Überblick

Der integrierte HTML-Editor ermöglicht es Dozenten, Lehrern und Administratoren, Inhalte direkt in Kursen, Nachrichten, Widgets und mehr zu erstellen und zu bearbeiten.

Dieser Artikel zeigt Ihnen, wie Sie auf die verschiedenen Elemente des Editors zugreifen und diese nutzen können, um ansprechende und ästhetische Inhalte zu erstellen.

Info
Bitte beachten Sie, dass die Business-Plattform standardmäßig den Begriff „Kurs“ und die akademische Plattform den Begriff „ Klasse“ verwendet. Die Begriffe „Kurs“ und „Klasse“ werden in diesem Artikel synonym verwendet.

Das Menü der Symbolleiste

Der HTML-Editor wird beim Bearbeiten von Inhalten in Kursen, Nachrichten, Widgets usw. angezeigt. Die Symbolleiste besteht aus einer Menüleiste und Symbolen, mit denen Sie Inhalte im jeweiligen Abschnitt bearbeiten können.

Info
Beachten Sie, dass die Screenshots in diesem Artikel innerhalb eines Kursabschnitts angezeigt werden. Die Symbolleiste funktioniert jedoch in Kursen, Nachrichten und Widgets gleich. Der Inhaltseditor links neben der Symbolleiste ist nur beim Bearbeiten von Kursen verfügbar.

Kurs, Modul, Seitenabschnitt im Bearbeitungsmodus mit hervorgehobener Symbolleiste

Die obere Menüleiste besteht aus sieben Menüs, die weiter unten genauer beschrieben werden.



Datei

Das Menü „Datei“ umfasst folgende Aktionen:

Titel
Beschreibung
Neues Dokument
Löscht alle Texte/Bilder/Links aus dem Textfenster.
Vorschau
Öffnen Sie ein Popup-Fenster, um eine Vorschau des veröffentlichten Inhalts zu sehen.
Drucken
Den Inhalt im Textfenster ausgeben.

Bearbeiten

Das Menü „Bearbeiten“ umfasst die folgenden Aktionen.

Titel
Beschreibung
Rückgängig machen
Mache deine letzte Aktion rückgängig.
Wiederholen
Wiederholen Sie Ihre letzte Aktion.
Schneiden
Den ausgewählten Text/das ausgewählte Bild entfernen und in der Zwischenablage speichern.
Kopie
Kopiere den ausgewählten Text/das ausgewählte Bild und speichere ihn/es in der Zwischenablage.
Paste
Füge Text/Bild aus der Zwischenablage ein.
Als Text einfügen
Fügen Sie den Inhalt aus der Zwischenablage als reinen Text ohne Formatierung ein.
Alle auswählen
Markieren Sie den gesamten Inhalt im Textfenster.
Suchen und ersetzen
Suchen Sie ein Wort oder eine Wortgruppe und ersetzen Sie es/sie gegebenenfalls durch ein neues Wort/eine neue Wortgruppe.

Sicht

Das Menü „Ansicht“ enthält die folgenden Aktionen zum Anzeigen von Text und Zeichen innerhalb des Textfensters.

Titel
Beschreibung
Quellcode
Den Quellcode im Textfenster anzeigen/bearbeiten.
Unsichtbare Zeichen anzeigen
Zeigt unsichtbare Zeichen wie Leerzeichen und weiche Zeilenumbrüche an.
Blöcke anzeigen
Zeigt Absatzblöcke innerhalb des Textfensters an.
Vorschau
Öffnen Sie ein Popup-Fenster, um eine Vorschau des veröffentlichten Inhalts zu sehen.

Einfügen

Das Menü „Einfügen“ enthält die folgenden Aktionen zum Einfügen von Bildern, Videos, Tabellen, Links und mehr.

Titel
Beschreibung
Link
Fügen Sie einen Hyperlink zu einer URL ein.
Medien
Ein Medium einfügen/einbetten.
Tisch Fügen Sie eine Tabelle ein und erstellen Sie diese.
Sonderzeichen Fügen Sie ein Sonderzeichen ein.
Emojis Füge ein Emoji ein.
Horizontale Linie
Füge eine horizontale Linie ein.
Seitenumbruch
Fügen Sie einen Zeilenumbruch ein, um eine neue Seite zu beginnen.
Schutzraum
Fügen Sie ein Leerzeichen ein, das den Seitenumbruch nicht verursacht.
Anker
Füge einen Anker/ein Lesezeichen an einer Position/einem Ort ein.
Vorlage einfügen
Fügen Sie eine gespeicherte Vorlage ein.
Als Vorlage speichern
Speichern Sie den markierten Text als Vorlage.
Datum/Uhrzeit
Wählen Sie Datum oder Uhrzeit aus dem Dropdown-Menü aus.
Gleichung bearbeiten
Klicken Sie, um eine markierte Gleichung zu bearbeiten.
Bild hochladen
Klicken Sie hier, um ein Bild hochzuladen.
Datei hochladen
Klicken Sie hier, um eine Datei hochzuladen.
Webkonferenz einrichten
Klicken Sie hier, um Webkonferenzen zum Text hinzuzufügen*.
Audio aufnehmen
Klicken Sie, um Audio direkt im Textfenster aufzunehmen.
Video aufnehmen
Klicken Sie, um direkt im Textfenster ein Video aufzunehmen.
Info
* Damit die Optionen zum Erstellen von Webkonferenzen angezeigt werden können, müssen die Webkonferenz-Apps zuerst aus dem App Center installiert werden.

Format

Das Menü „Format“ enthält die folgenden Aktionen zum Formatieren von Text.

Titel
Beschreibung
Deutlich
Markieren Sie den ausgewählten Text fett.
Kursiv
Setzen Sie den ausgewählten Text kursiv.
Unterstreichen
Unterstreichen Sie den ausgewählten Text.
Durchgestrichen
Den ausgewählten Text durchstreichen.
Hochgestellt
Formatieren Sie den ausgewählten Text als hochgestellte Zahl.
Index
Formatieren Sie den ausgewählten Text als tiefgestellten Text.
Code
Formatieren Sie den ausgewählten Text als Code.
Blöcke
Fügen Sie die passende Blockformatierung aus dem Dropdown-Menü ein.
Schriftarten
Wählen Sie im Dropdown-Menü eine andere Schriftart aus.
Schriftgrößen
Wählen Sie eine Schriftgröße aus dem Dropdown-Menü aus.
Ausrichten
Wählen Sie im Dropdown-Menü einen Textausrichtungsstil aus.
Linienhöhe
Wählen Sie die Zeilenhöhe aus dem Dropdown-Menü aus.
Einzug vergrößern
Richten Sie den Text oder Absatz nach rechts ein.
Einzug verringern
Verschieben Sie den Text oder Absatz nach links.
Textfarbe
Wählen Sie die gewünschte Textfarbe aus dem Dropdown-Menü aus.
Hintergrundfarbe
Wählen Sie eine Hintergrundfarbe aus dem Dropdown-Menü.
Klare Formatierung
Klare Formatierung des ausgewählten Textes.

Werkzeuge

Das Menü „Tools“ umfasst die folgenden Aktionen.

Titel
Beschreibung
Quellcode
Quellcode ansehen/bearbeiten.
Wortanzahl Sehen Sie sich die Wort- und Zeichenanzahl an.

Tisch

Das Menü „Tabelle“ enthält die folgenden Aktionen zum Einfügen einer Tabelle und zum Ändern der Tabellenstruktur.

Titel
Beschreibung
Tisch
Füge eine Tabelle ein.
Zelle Änderungsoptionen für die ausgewählten Zellen aus dem Dropdown-Menü.
Reihe
Über das Dropdown-Menü können Sie Optionen für die ausgewählten Zeilen ändern, löschen und/oder einfügen.
Spalte
Über das Dropdown-Menü können Sie Optionen für die ausgewählten Spalten ändern, löschen und/oder einfügen.
Tabelleneigenschaften
Tabelleneigenschaften wie Breite, Höhe, Rahmen usw. anzeigen und ändern.
Tabelle löschen
Die ausgewählte Tabelle löschen.

Das sekundäre Menü der Symbolleiste

Unterhalb des Hauptmenüs befindet sich die Symbolleiste mit leicht zugänglichen Dropdown-Optionen und Symbolen für zusätzliche Formatierungen.


Rückgängig und Wiederherstellen

  1. Klicken Sie auf das Symbol „Rückgängig“ , um die vorherige Aktion rückgängig zu machen.
  2. Klicken Sie auf das Symbol „Wiederholen“ , um das vorherige Symbol zu wiederholen.
Rückgängig- und Wiederherstellen-Symbole

Absatz- und Überschriftenstile

  1. Klicken Sie auf das Dropdown-Menü „Überschriftenstil“ , um Formate und Stile auf den Text anzuwenden.


Schriftart

  1. Klicken Sie auf das Dropdown-Menü „Schriftart“ , um die Schriftart Ihres Textes zu ändern.

Schriftgröße

    1. Klicken Sie auf das Dropdown-Menü für die Schriftgröße , um die Textgröße zu ändern.

    Schriftformat

    1. Klicken Sie auf das Fettdrucksymbol , um den Text fett zu formatieren.
    2. Klicken Sie auf das Kursivsymbol, um den Text kursiv zu formatieren.
    3. Klicken Sie auf das Unterstreichungssymbol , um Text zu unterstreichen.
    Fettdruck-, Kursiv- und Unterstreichungssymbole

    Textfarbe

      1. Klicken Sie auf das Textfarbensymbol, um die Schriftfarbe auszuwählen/zu ändern.

      Textausrichtung

      1. Klicken Sie auf das Ausrichtungssymbol , um den Text auszurichten.


      Stichpunktliste

      1. Klicken Sie auf das Symbol für Aufzählungslisten , um eine Aufzählungsliste zu erstellen und zu formatieren.

      Nummerierte Liste

      1. Klicken Sie auf das Symbol für die nummerierte Liste , um eine Aufzählung oder nummerierte Liste zu erstellen und zu formatieren.

      Bild hochladen und Datei hochladen

      1. Klicken Sie auf das Symbol zum Hochladen von Bildern , um ein Bild hochzuladen.
      2. Klicken Sie auf das Symbol zum Hochladen von Dateien , um beliebige Dateien hochzuladen.
      Bild- und Dateisymbole hochladen

      Klare Formatierung

      1. Klicken Sie auf das Symbol „Formatierung löschen“ , um Formatierungen zu entfernen, die möglicherweise beim Kopieren und Einfügen von Inhalten übernommen wurden.
      Symbol zum Löschen der Formatierung

      Hintergrundfarbe

      1. Klicken Sie auf das Symbol für die Hintergrundfarbe , um Text/Bilder hervorzuheben.

      Erweiterte Symbolleiste

      Für zusätzliche Funktionen:

      1. Klicken Sie auf „ Mehr“ . Symbol zum Anzeigen der erweiterten Symbolleiste.


      Die erweiterte Symbolleiste wird unterhalb der sekundären Symbolleiste angezeigt und enthält zusätzliche Optionen, die im Folgenden erläutert werden.



      Einzüge und horizontale Linie

      1. Klicken Sie auf das Symbol „Einzug verringern“ , um den Einzug des Textes zu verringern.
      2. Klicken Sie auf das Symbol „Einzug vergrößern“, um den Text einzurücken.
      3. Klicken Sie auf das Symbol für die horizontale Linie , um eine horizontale Linie einzufügen.
      Symbole zum Verringern des Einzugs, Vergrößern des Einzugs und für horizontale Linien

      Emojis

      1. Klicken Sie auf das Emoji Emoji-Symbol Symbol zum Öffnen der Emoji-Tastatur.
      2. Klicken Sie auf ein Emoji, um es einzufügen.

      Sonderzeichen

      1. Klicken Sie auf das Sonderzeichen Sonderzeichensymbol Symbol zum Öffnen des Pop-up-Fensters „Sonderzeichen“.
      2. Klicken Sie auf ein Sonderzeichen, um es einzufügen.


      Erweiterte Symbole

      1. Klicken Sie auf das Symbol „Link einfügen/bearbeiten“. einen Link zu einer beliebigen URL einfügen.
      2. Klicken Sie auf das Symbol „Medien einfügen/bearbeiten“. einen Link zu einer beliebigen URL einfügen/einbetten.
      3. Klicken Sie auf das Symbol „Gleichung einfügen/bearbeiten“. einen Link zu einer beliebigen URL einfügen/einbetten.
      4. Klicken Sie auf das Symbol „Vorlage einfügen“ . Symbol für Vorlage einfügen um eine Vorlage einzufügen.
      5. Klicken Sie auf das Quellcode-Symbol. Quellcode-Symbol Um den Quellcode der aktuellen Seite anzuzeigen.
      6. Klicken Sie auf das Symbol „Audio aufnehmen“ . Symbol für Audioaufnahme Audio direkt auf der Kursseite aufnehmen.
      7. Klicken Sie auf das Symbol „Video aufnehmen“ . Videoaufnahmesymbol Video direkt auf der Kursseite aufzeichnen.
      1. Klicken Sie auf das Symbol „Webkonferenz erstellen“. Webkonferenz-Symbol erstellen Um einen Link zu einer Webkonferenz mithilfe einer der Dropdown-Optionen zu erstellen.
        1. Hinweis – Es werden nur Webkonferenz-Apps angezeigt, die auf Ihrer Plattform installiert sind.


      Bewährte Verfahren

      Nutzen Sie diese bewährten Methoden, um das Beste aus dem Editor herauszuholen.

      • Um anstelle eines neuen Absatzes einen Zeilenumbruch einzufügen, drücken Sie Shift + Enter.
      • Beim Einbetten von HTML-Widgets sollte man sich zuerst den Quellcode des Textfensters ansehen.
        • Klicken Sie auf das Dropdown-Menü „Ansicht“ .
        • Klicken Sie auf < > Quellcode .
      • Um Formatierungsfehler zu vermeiden, fügen Sie Inhalte von Drittanbietern als Klartext ein.
      • Um die Ränder einer Tabelle unsichtbar zu machen:
        • Wählen Sie die Tabelle aus.
        • Klicken Sie auf Tabelleneigenschaften .
        • Im Reiter „Allgemein“ des Pop-up-Fensters stellen Sie die Rahmenbreite auf „0“ ein.
        • Im Menüband „Erweitert“ wählen Sie als Rahmenstil „Ausgeblendet“ oder „Keine“ aus.


      Rechtschreibprüfung

      Der Editor enthält eine Rechtschreibprüfung, die falsch geschriebene Wörter rot markiert. So korrigieren Sie einen Rechtschreibfehler:

      1. Drücken Sie STRG + Rechtsklick .
      2. Wählen Sie die richtige Schreibweise aus der Liste der Vorschläge aus.

      Einbettungsvariablen

      Sie können Variablen in Lektionsseiten einbetten, indem Sie das Format {{Variablenname}} verwenden. Dadurch können Sie Inhalte für Benutzer und Kurse individuell anpassen.

      Auf der Inhaltsseite können folgende Variablen verwendet werden:
      • {{class_custom_field_1}}
      • {{class_custom_field_2}}
      • {{class_finish_date}}
      • {{class_id}}
      • {{class_location}}
      • {{class_name}}
      • {{class_name_with_link}}
      • {{class_start_date}}
      • {{completed_at_utc}}
      • {{course_code}}
      • {{credits}}
      • {{days_in_class}}
      • {{days_left}}
      • {{deactivate_students_after}}
      • {{organization_id}}
      • {{organization_name}}
      • {{section_code}}
      • {{site_name}}
      • {{site_name_with_url}}
      • {{teacher_name}}
      • {{teacher_name_with_link}}
      • {{user_email}}
      • {{user_first_name}}
      • {{user_full_name}}
      • {{user_full_name_with_link}}
      • {{Benutzer-ID}}
      • {{user_last_name}}
      • {{user_prefered_contact_method}}
      • {{user_ssn}}
      • {{Benutzer-ID}}
      • {{Warum}}


      Größen-Videos

      Wenn Sie im HTML-Editor ein Video als Link hinzufügen, können Sie dessen Größe mit diesem HTML-Code festlegen:
      <a width='100' height='700'>Link</a>.
      1. Wenn das Video automatisch in der Größe angepasst werden soll, können Sie einen der Werte (Breite oder Höhe) weglassen.
      2. Sie können auch Prozentwerte verwenden, um die Größe eines Videos festzulegen, zum Beispiel <width='100%' >.

      Bildbearbeitung

      Der Editor bietet verschiedene Optionen zum Bearbeiten von Bildern nach dem Hochladen. So bearbeiten Sie ein Bild:

      1. Klicken Sie auf das Bild.
      2. Es erscheint ein Menü mit Optionen.
      Symbol
      Beschreibung

      		Bild gegen den Uhrzeigersinn drehen
      Symbol im Uhrzeigersinn drehen
      		 Bild im Uhrzeigersinn drehen
      Symbol zum horizontalen Spiegeln des Bildes
      		 Bild horizontal spiegeln
      Symbol zum vertikalen Spiegeln des Bildes Bild vertikal spiegeln
      Symbol zum Zuschneiden
      		 Bild zuschneiden
      Bild bearbeiten-Symbol
      		 Bildeigenschaften bearbeiten

      Kurs, Modul, Abschnitt bearbeiten mit einem hervorgehobenen Bild und aktiver Bildbearbeitungs-Werkzeugleiste

      Wenn Sie das Symbol „Bildeigenschaften bearbeiten“ auswählen, wird das Popup „Bild einfügen/bearbeiten“ angezeigt.
      1. Quelle : Zeigt die Bildquelle an.
      2. Alternative Beschreibung : Diese Beschreibung wird von Bildschirmleseprogrammen vorgelesen, um sehbehinderten Nutzern zu helfen.
      3. Breite und Höhe : Passen Sie die Größe des Bildes an.
        1. Hinweis: Verwenden Sie das Schlosssymbol, um sicherzustellen, dass das Bild sein Breiten-/Höhenverhältnis beibehält.


      Beim Hinzufügen eines neuen Bildes können Sie auch eine Beschreibung für Bildschirmleseprogramme hinzufügen:
      1. Geben Sie im Feld „Bildbeschreibung“ eine Beschreibung ein.

      Pop-up zum Hochladen von Bildern

      Inhaltsvorlagen

      Mit Inhaltsvorlagen können Sie HTML-Fragmente im Ressourcenkatalog speichern und später einfach in Inhaltsbereiche einfügen. So erstellen Sie eine Bibliothek häufig verwendeter Inhaltselemente.

      So fügen Sie ein HTML-Fragment in eine Inhaltsvorlage ein:

      1. Markieren Sie den Text und/oder die Bilder im HTML-Editor.
      2. Rechtsklick.
      3. Wählen Sie „Als Vorlage speichern“ .


      1. Geben Sie einen Titel für die Vorlage ein.
      2. Klicken Sie auf OK .
      3. Die Inhaltsvorlage wird in Ihrer persönlichen Bibliothek gespeichert.


      So greifen Sie auf Ihre gespeicherten Inhaltsvorlagen zu:

      1. Klicken Sie in der linken Navigationsleiste auf „Ressourcen“ .
      2. Klicken Sie im Ausklappmenü auf „Katalog“ .
      3. Filtern Sie im Suchfeld nach Ressourcentyp > Inhaltsvorlage .
      4. Klicken Sie auf Ihre Inhaltsvorlage.


      Die Inhaltsvorlage wird angezeigt. Weitere Details zu einer Inhaltsvorlage finden Sie hier:
      1. Klicken Sie auf Details .

      Ressourcen, Pop-up-Fenster für Inhaltsvorlagen


      Sie können den Inhaltsbereich jetzt aktualisieren:
      1. Klicken Sie auf „Bearbeiten“ , um den Inhalt zu bearbeiten .
      2. Klicken Sie auf „Löschen“ , um die Vorlage zu entfernen.

      Ressourcen, Inhaltsvorlage mit hervorgehobenen Bearbeitungs- und Löschsymbolen

      Wenn Sie auf „Bearbeiten“ klicken, können Sie den Inhalt aktualisieren und ihn mit anderen Nutzern teilen.
      1. Wählen Sie „Persönlich“ , „Organisation“ oder „Geschäftlich “, wenn die Inhaltsvorlage auch anderen Benutzern zur Verfügung stehen soll.
      2. Nach der Bearbeitung des Inhalts klicken Sie auf Speichern .


      So fügen Sie eine Kopie der Inhaltsvorlage in einen Abschnitt ein:
      1. Rufen Sie den Abschnitt auf.
      2. Rechtsklick.
      3. Wählen Sie „Vorlage einfügen“ .
      4. Wählen Sie die Vorlage aus der Dropdown-Liste aus.
      5. Klicken Sie auf Speichern .