HTML-Editor

Diese Seite ist noch nicht vollständig übersetzt.

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 finden auch hier das bekannte Icon Datei:Ed paste.gif zum Einfügen des kopierten oder ausgeschnittenen Textes. Sie können auch die Tastaturkürzel Strg+C, Strg+X swie Strg+V verwenden.

Die Funktionen des Werkzeugleiste des HTML-Editors

Datei:Course Lesson Page Content Toolbar.GIF

HTML editor toolbar in a Lesson page, other modules will look similar.

Schrift- und Hintergrundfarben

Zwei Schaltflächen zum Ändern der SchriftfarbeDatei:Ed color fg.gif und zum Ändern der farblichen Hinterlegung von TextDatei:Ed color bg.gif sind vorhanden. Ein Klick darauf öffnet eine Farbpalette zur Farbauswahl. Sie sehen ebenfalls des HTML-Farbcode im Palettenfenster.

Datei:HTML toolbar Color pallet.JPG

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

Anker

Datei:Ed anchor.gif 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 Ankersymbol 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. Datei:HTML toolbar anchor tool.JPG

Links einfügen

Datei:Ed link.gif

Ein Link verweist üblicherweise auf eine externe, interne oder die aktuelle Webseite. Mittels der Schaltfläche kann 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

Geben Sie den Text ein, der als Link verwendet werden soll.
- - Beispiel: "Ein Link zur Startseite von Moodle.org".
Markieren Sie den Text
- - For example select "course file" by highlighting it with your mouse.
Click the Datei:Ed link.gif link button in the toolbar
Type (or paste, or browse to) the URL you want to link to
- - For example we used browsed and clicked on the file to get our entry
Type in some text which will appear when the mouse rolls over it
- - For example: "Course file in demo moodle."
Target - What kind of window should be called up
- - Datei:HTML editor insert link target menu.jpg
Anchors - A pull down list allows you to select an anchor you created on the page
Click OK

Datei:HTML toolbar Hyperlink.JPG

After the above steps the student will see:
- Datei:HTML toolbar Insert Link result1.jpg
  This result

TIPs - inserting links

This process does NOT work inside the wiki module where you need to use the Wiki link system (square brackets containing the label and the link separated by a vertical line character)
A course file has a URL address that can be found via the browse button

Inserting images

Datei:Ed image.gif Moodle allows you to upload pictures into a course or site folder, then insert that image into the content area. It is also possible to use an existing image located outside of your Moodle site.

You can include images in the content area by using the Datei:Ed image.gif button. This will bring up an insert image edit screen to assist you in inserting an picture. More detailed instructions for inserting an image can be found here. Moodle recognizes JPG, GIF and PNG as image files.

Datei:HTML Insert Image tool pop-up.JPG

Insert image page link in Moodle Documentation

Inserting tables

Datei:Insert table.gif To add layout to your texts, you can use the "Insert Tables" button in the toolbar.

Datei:HTML toolbar table settings.jpg

Most table editing tools are only visible if you click the Enlarge Editor button.

Inserting smilies (emoticons)

The smiley icon Datei:Smiley.gif will allow you to add a small icon (for example Datei:Cool.gif ) in your text. A dialog will pop up that allows you to select from a table of smiley icons. Alternatively, you can just type the corresponding code straight into your text and it will be converted later when your text is displayed.

Datei:HTML toolbar Smiley icon selections.JPG

Special characters

The special characters Datei:special characters button.gif button, allows you to enter special characters from a table.

Datei:HTML toolbar Special character selections.JPG

Toggle to HTML Code editing

The Datei:Ed html.gif button changes the display window to raw HTML code. This can be useful for those of you that know how to use it (or want to learn!). Most of the buttons do not work in this view, including many of the hotkeys.

Datei:HTML editor HTML code example.png

Example of HTML code for content area in a forum post

Enlarge editor

The Datei:Fullscreen maximize.gif button will expand the HTML editor area.

Clean Word button

The clean Word Datei:Ed wordclean.gif button removes some Word formatting from your pasted text so that the page is smaller, less complex and thus loads faster. The Microsoft Office HTML Filter 2.0 removes all Word code from HTML file far more effectively. This filter is already built into office in Microsoft Office XP onwards.

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.

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

Tips and Tricks

Theme settings can control the default fonts in the HTML editor. It is possible to have individual themes for a context (for example, a course may have its own theme).

When you choose many functions a new small window will open. Unfortunately it can often open BEHIND the window you are in so you may miss that anything has happened. You can check new windows with [Alt]+[Tab].

The HTML editor does not work in all browsers. If you are using a Mac OS X and for some reason it does not appear, try using Firefox instead of Safari as a browser.

Can not make HTML give you the text style you want? Use an image or even an animated gif file.

Documentation