HTML-Editor

Wechseln zu: Navigation, Suche

Hinweis: Sie sind auf den Seiten der Moodle 1.9 Dokumentation. Die Dokumentation der aktuellsten Moodle-Version finden Sie hier: HTML-Editor.

Moodle bietet zum Editieren von Inhalten einen WYSIWIG-Editor mit Werkzeugleiste an, der die Eingabe in HTML umwandelt. Viele der Werkzeuge dieser Leiste sind aus Textverarbeitungsprogrammen wie MS-Word und OpenOffice Writer bekannt. Andere, weniger bakannte Werkzeuge, die sich hinter den Schaltflächen dieser Werkzeugleiste verbergen, sollen in diesem Artikel näher vorgestellt werden. Die Informationen richten sich in erster Linie an weniger versierte Anwender von Moodle.

Wenn Sie bspw. Texte aus einer anderen Anwendung kopieren und in das Editorfeld einfügen, werden die Formatierungen beibehalten. Sie können die Tastaturkürzel Strg+C, Strg+X sowie Strg+V , sowie die Äquivalente des Kontextmenüs durch Benutzung der rechten Maustaste verwenden.


Die Funktionen des Werkzeugleiste des HTML-Editors

Htmleditor1.png


Schrift- und Hintergrundfarben

Zwei Schaltflächen zum Ändern der SchriftfarbeHtmledittextcol.png und zum Ändern der farblichen Hinterlegung von TextHtmleditbackcol.png sind vorhanden. Ein Klick darauf öffnet eine Farbpalette zur Farbauswahl. Sie sehen ebenfalls des HTML-Farbcode im Palettenfenster.
Htmleditcolpalett.png

Beachten Sie bitte, dass Sie dafür auch Pop-Up-Fenster in Ihrem Browser zulassen müssen.

Anker

Htmleditankdialog.png

Ein HTML-Anker dient als Sprungreferenz innerhalb einer HTML-Seite. Um einen Anker einzufügen, markieren Sie die Textstelle, die als Anker dienen soll und klicken dann auf das AnkersymbolHtmleditanker.png der Werkzeugleiste. Benennen Sie nun den Anker. Sie können nun von überall auf der betreffenden Seite einen Link zu diesem Anker anlegen, indem Sie das Link-Symbol anklicken und im Dropdown-Menü den korrekten Anker auswählen. Moodle hat die Anker bereits für Sie zusammengefasst.

Links einfügen

Ein Link verweist üblicherweise auf eine externe, interne oder die aktuelle Webseite. Mittels der Schaltfläche Htmleditlink.pngkann der Code für Link komfortabel über die Eingabemaske erzeugt werden. Eine Möglichkeit ist, den URL aus der Adresszeile des Browsers zu kopieren, auf das Icon der Werkzeugleiste zu klicken und den URl einzufügen. Eine weitere Möglichkeit ist, auf die Schaltfläche Durchsuchen zu klicken, um Dateien im Dateibereich des Kurses zu verlinken. Von hier aus kann auch direkt eine neue Datei hochgeladen und verlinkt werden.


Einen neuen Link erstellen

Htmleditlinkdialog.png
  • Geben Sie den Text ein, der als Link verwendet werden soll.
      • Beispiel: "Ein Link zur Startseite von Moodle.org".
  • Markieren Sie den Text
  • Klicken Sie auf das Link-Symbol der Werkzeugleiste.
  • Geben Sie den URL ein, zu dem der Link weisen soll.
      • Im Beispiel verweisen wir auf die Startseite von Moodle.org
  • Geben Sie einen Text im Feld "Titel" ein, der als Tooltip beim Überfahren mit der Maus angezeigt werden soll.
      • Im Beispier: "Hier geht´s zu Moodle.org"
  • Sie können nun auswählen, ob der Link im gleichen Fenster bzw. Frame geöffnet werden soll.
    • Wählen Sie in diesem Fall "Andere (außerhalb der Reihe)", können Sie in einer neu geöffneten Zeile im Dialogfenster weitere Ziele angeben.
Htmleditlinkdialog.png
  • Anker - Aus der Dropdown-Liste können Sie aus den evtl. vorhandenen Ankern auswählen.
  • Klicken Sie auf OK, um den Vorgang abzuschliessen.
  • Wollen Sie stattdessen auf eine Datei aus dem Dateiverzeichnis des Kurses verweisen, verwenden Sie die Schaltfläche Durchsuchen. Mittels des dann erscheinenden Dateibrowsers wählen Sie aus den vorhandenen Dateien aus bzw. laden eine weitere Datei hoch.


Tips zum Einfügen von Links

  • Dieser Vorgang funktioniert nicht zur Verlinkung innerhalb des Wiki-Moduls. Hier kommt stattdessen die Auszeichnungssprache des Wikis zum Einsatz. Dabei werden Links zu anderen Wiki-Seiten in eckige Klammern gesetzt, wobei diese wiederum den Seitentitel und den Link, getrennt durch eine vertikale Linie enthalten.

Grafiken einfügen

Sie können mit Moodle Grafiken in den Dateiordner eines Kurses - d.h. auch der Startseite - hochladen und anschliessend in Ihren Inhaltsbereich einbetten. Ebenso kann auf ein Bild verwiesen, welches sich ausserhalb Ihrer Moodle-Plattform befindet, wenn der URL des Bildes bekannt ist.

Verwenden Sie zum Einfügen einer Grafik die entsprechende SchaltflächeHtmleditbild.png. Dies öffnet ein weiteres Dialogfeld, in welchem Sie einen Dateibrowser zur Bildauswahl verwenden können, sowie Größe und weitere Anzeigemodalitäten des Bilds verändern können. Siehe auch hier.

Htmleditbildbrows.png

Tabellen einfügen

  • Verwenden Sie zum Einfügen von Tabellen das Tabellen-Icon der Werkzeugleiste.Htmledittabicon.png
  • Im nun erscheinenden Dialogfeld können Sie die Parameter der Tabelle näher definieren.
Dialogfenster zur Bestimmung von Tabellenparametern
  • Weitere Tabellenfunktionen stehen Ihnen nach Vergrößern des Editors zur Verfügung.

Emoticons einfügen

Auswahl eines Emoticons

Mit der SchaltflächeHtmleditemoticon1.png können Sie Emoticons (auch bekannt als Smileys) in Ihren Text einfügen. In einer Auswahlmaske können Sie aus den im System hinterlegten Emoticons das für ihre Aussage passende durch Anklicken verwenden. Sie können natürlich auch die entsprechende Zeichenfolge verwenden, die neben den Emoticons aufgelistet ist. Diese wird dann durch den HTML-Editor nach dem Speichern in das entsprechende Emoticon umgewandelt.

Sonderzeichen einfügen

Diese Schaltfläche Htmleditsonderzeichen1.png erlaubt Ihnen, komfortabel Sonderzeichen einzufügen. Nachdem Klick auf die Schaltfläche erscheint ein Auswahldialog, ein weiterer Klick auf das gewünschte Zeichen platziert an der gewünschten Stelle im Text.

Auswahl eines Sonderzeichens

HTML-Modus ein-/ausschalten

Diese Schaltfläche Htmleditorcode.png schaltet den Inhalt des Eingabefeldes des Editors auf HTML-Darstellung und -Bearbeitung um. Das kann sinnvoll sein, wenn Sie direkt HTML eingeben möchten, oder einfach nur sehen wollen, wie der vom Editor generierte HTML-Code aussieht. Allerdings funktionieren hier natürlich viele der Schaltflächen und Tastaturkürzel nicht mehr.

Beispiel der Code-Ansicht

Editor vergrößern

Die Schaltfläche Htmleditlarge1.png vergrößert das Editorfeld, indem der Editor in einem Pop-up-Fenster neu geöffnet wird. Die dort eingegeben Inhalte werden vollständig in das eigentliche Editorfeld übernommen. Beachten Sie auch die nun verfügbaren Tabellenfunktionen, die als Schaltflächen nur in der vergrößerten Ansicht verfügbar sind.

Htmleditlarge.png

Word-Formatierungen entfernen

Mit dieser SchaltflächeHtmleditword.png werden Texte, die aus Word-Dokumenten hineinkopiert wurden, von Word-spezifischen Steuerzeichen bereinigt. Damit wird der generierte HTML-Code schneller aufgebaut und sicherer von den gängigen Browser korrekt dargestellt. Der Microsoft Office HTML Filter 2.0 entfernt diese Steuerzeichen deutlich effektiver. Dieser Filter ist seit Office XP integriert.

Tastaturkürzel

Es stehen sowohl einige allgemeine Tastaturkürzel zur Verfügung, als auch spezielle Kürzel, die nur im HTML-Editor so funktionieren. Unterschiedliche Betriebssysteme und Browser können diese Küzel anders interpretieren. Die allgemeinen Kürzel sind hier fett dargestellt.

Kürzel Aktion Kürzel Aktion
Strg-C Kopieren Strg-V Einfügen
Strg-X Ausschneiden Strg-F Suchen
Strg-H Suchen und ersetzen * *
Strg-Z Rückgängig Strg-Y Wiederholen
Strg-B Text fett Strg-I Text kursiv
Strg-U Text unterstrichen Strg-S Text durchgestrichen
Strg-H Textformat ändern (Überschriften etc.) Strg-1 bis Ctrl-6 Überschriftsordnung ändern
Strg-, tiefgestellt Strg-. hochgestellt
Strg-O Schriftart ändern Strg-0 HTML von Word-tags bereinigen
Strg-L linksbündig Strg-E zentriert
Strg-J Blocksatz Strg-/ Textfluss rechts nach links
Strg-| Textfluss links nach rechts Strg-; Decrease indent
Strg-' Increase indent Strg-G Textfarbe ändern
Strg-K Hintergrundfarbe ändern Strg-P Schriftgröße ändern
Strg-` HTML-Code-Ansicht umschalten Strg-M Editor vergrößen/verkleinern
Strg-Alt-O nummerierte Liste einfügen Strg-Alt-U unnummerierte Liste einfügen
Strg-Alt-R horizontale Linie einfügen Strg-Alt-A Anker erstellen
Strg-Alt-L link erstellen Strg-Alt-D Link aufheben
Strg-Alt-N automatische Verlinkung abstellen Strg-Alt-I Grafik einfügen
Strg-Alt-T Tabelle einfügen Strg-Alt-S Emoticon/Smiley einfügen
Strg-Alt-C Sonderzeichen einfügen Strg-= Textsprache für Screenreader anpassen, bzw. Sprache für den Multilang Filter auswählen.

Tipps and Tricks

  • Design-Einstellungen bestimmen die verwendeten Schriften, die der Editor in der Auswahl vorgibt. Es ist möglich, eigene Designs (engl. Themes) für bestimmte Kontexte zu verwenden, z.B. kann ein Kurs sein eigenes Design haben.
  • Viele Funktionen werden über ein Pop-Up-Fenster genauer definiert und erstellt. Es kann passieren, dass sich das Pop-Up HINTER dem Browserfenster öffnet und man den Eindruck hat, als würde nichts passieren. Verwenden Sie [Alt]+[Tab], um zwischen den Fenstern umzuschalten.
  • Der HTML-Editor funktioniert nicht mit allen Browsern. Falls Sie Mac OS X und Safari verwenden und auf Probleme mit dem Editor stoßen, dann wechseln Sie zu Firefox oder Camino.
  • Sie schaffen es nicht, mit HTML die Textdarstellung nach Ihren Wünschen herzustellen? Versuchen Sie, mit Grafiken oder gar animierten GIF-Dateien zum Ziel zu gelangen.

Siehe auch

Forumsdiskussionen auf Using Moodle :