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

Baustelle.png Diese Seite ist noch nicht vollständig übersetzt.

Siehe en: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 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.

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

Ein Link verweist üblicherweise auf eine externe, interne oder die

An HTML link creates a path to external, internal or the current page. The icon saves writing code.  One method is to copy the address bar from the location you want, click on the link icon,then paste it URL. Another method is to press the Browse button.  This will take you to the Files area of the course.  From here it is possible to select an existing file or to upload a new file and link to it.

To make a new link

  • Type the text that you want to be a link
      • For example: "Link to course file in demo.moodle.org"
  • Select the 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
  • Anchors - A pull down list allows you to select an anchor you created on the page
  • Click OK


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.

Inserting tables

  • 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.

Special characters

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

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.

Shortcut keys

Here are some common editing short cut or hot keys which will within the HTML editor in WYSIWYG view. Different operating systems and browsers may not support all these keys. The most universal hot keys are in bold.

Keys Action Keys Action
Ctrl-C Copy Ctrl-V Paste
Ctrl-X Cut Ctrl-F Find text
Ctrl-H Find and replace * *
Ctrl-Z Undo Ctrl-Y Redo
Ctrl-B Make text bold Ctrl-I Make text italic
Ctrl-U Underline text Ctrl-S Strikethrough text
Ctrl-H Change text format (headings etc.) Ctrl-1 to Ctrl-6 Change heading level
Ctrl-, Subscript Ctrl-. Superscript
Ctrl-O Change the font Ctrl-0 Clean Word HTML
Ctrl-L Justify left Ctrl-E Center
Ctrl-J Justify full Ctrl-/ Text runs left to right
Ctrl-| Text runs right to left Ctrl-; Decrease indent
Ctrl-' Increase indent Ctrl-G Change text colour
Ctrl-K Change background colour Ctrl-P Change the font size
Ctrl-` Switch to HTML source code view Ctrl-M Toggle fullscreen editor mode
Ctrl-Alt-O Insert ordered list Ctrl-Alt-U Insert unordered list
Ctrl-Alt-R Insert horizontal rule Ctrl-Alt-A Create anchor
Ctrl-Alt-L Create link Ctrl-Alt-D Unlink
Ctrl-Alt-N Turn off autolinking Ctrl-Alt-I Insert image
Ctrl-Alt-T Insert table Ctrl-Alt-S Insert emoticon
Ctrl-Alt-C Insert special character Ctrl-= Change text language for screen readers, or specify language for the Multilang filter

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.

See also

Using Moodle forum discussions:

pl:Edytor_HTML