TinyMCE-Editor

Diese Seite muss überarbeitet werden.
Es kümmert sich jemand darum, aber du darfst auch gern selbst mithelfen! Wenn du mit deiner Arbeit fertig bist, dann entferne die Vorlage {{ÜberarbeitenVergeben}} aus dem Artikel.
Danke für deine Mitarbeit!

Neue Funktionalität
in Moodle 4.1!

Was ist der TinyMCE-Editor?

TinyMCE ist ein mächtiger Texteditor, der Nutzer/innen erlaubt, über eine nutzerfreundliche Oberfläche formatierte Inhalte zu erstellen.

Die Moodle-Administration kann den Editor auf der Seite Website-Administration > Plugins > Texteditoren > Übersicht aktivieren, deaktivieren und als Standard-Editor festlegen.

Wenn die Moodle-Administration es erlaubt hat, können Nutzer/innen in ihrem Profil den TinyMCE als bevorzugten Editor wählen (anstelle des Standardeditors Atto-Editor): Nutzermenü > Profil > Profil bearbeiten.

Hinweis: Es gibt auch eine ältere Version des Editors: TinyMCE-Editor (veraltet). Wir empfehlen jedoch, dieses veraltete Plugin zu deaktivieren und stattdessen die neue Version zu verwenden. Die neue Version ist besser im Blick auf Barrierefreiheit und wird irgendwann den Atto-Editor als Standardeditor ersetzen.

TinyMCE Symbolleiste

Die folgenden Buttons sind in der Symbolleiste verfügbar (nicht alle Buttons werden immer angezeigt - das hängt von den Einstellungen der Moodle-Administration ab):

Hier ist die Liste aller Symbole:

#	Button	#	Button
1	Rückgängig	10	Linksbündig ausrichten
2	Wiederholen	11	Zentrieren
3	Fett	12	Rechtsbündig ausrichten
4	Kursiv	13	Blocksatz
5	Bild einfügen / Eigenschaften bearbeiten	14	Einzug verkleinern
6	Multimedia einfügen / Eigenschaften bearbeiten	15	Einzug vergrößern
7	Audio aufnehmen	16	Aufzählung
8	Video aufnehmen	17	Nummerierte Liste
9	H5P einfügen / Eigenschaften bearbeiten	18	Gleichungseditor
		19	Zweite Symbolzeile ein- und ausblenden

Einige Symbole werden nur unter bestimmten Voraussetzungen angezeigt. Zum Beispiel wird das Gleichungseditor-Symbol nur angezeigt, wenn der MathJax oder der TeX-Filter systemweit aktiviert sind (unter Website-Administration > Plugins > Filter > Übersicht), während das H5P-Symbol nur erscheint, wenn Sie das Recht Capabilities/tiny/h5p:addembed haben.

TinyMCE Funktionen

Die folgenden Funktionen sind über das Menü Einfügen verfügbar:

Bild einfügen

Der einfachste Weg, ein Bild einzufügen, ist per Drag & Drop. Alternativ können Sie die Funktion Einfügen Bild nutzen, das Ihnen mehr Kontrolle über einige Bildeigenschaften bietet:

• URL: Die (interne oder externe) Adresse des Bilds. Sie können den URL entweder manuell eingeben, oder es über Datei auswählen aussuchen und einfügen, wodurch der URL automatisch eingefügt wird.
• Beschreibung: Sofern das Bild nicht nur der Dekoration dient (s. Checkbox), muss eine Beschreibung angegeben werden, damit Screenreader das Bild beschreiben können.
• Größe: Breite und Höhe werden automatisch vorbelegt. Beide können nach Bedarf angepasst werden. Solange die Chackbox Proportional ausgewählt bleibt, bleibt das Verhältnis von Breite zu Höhe gleich.
• Ausrichtung: Hier gibt es die Optionen Oben, Mittig und Unten.

Um die Bildeigenschaften nach dem Hinzufügen zu ändern, wählen Sie das Bild und klicken auf den Bild Button, der in der erscheinenden Mini-Symbolleiste angezeigt wird.

Link einfügen/bearbeiten

Um einen Link zu einer anderen (internen oder externen) Seite einzufügen oder zu bearbeiten, können Sie folgende Einstellungen angeben:

• URL: Die Adresse der Seite, zu der navigiert wird. Innerhalb der gleichen Seite sind die Optionen <top> und <bottom> verfügbar (wählbar, wenn der Text hier leergelassen wird).
• Text zum Anzeigen: Der als Link angezeigte Text
• Titel: Der Text, der angzeigt wird, wenn man über den Link hovered.
• Link öffnen...: Die Seite kann entweder im Aktuellen Fenster geöffnet werden oder man nutzt ein Neues Fenster.

Multimedia einfügen

Um bestehende Audio- oder Video-Dateien einzufügen, unterstützt der TinyMCE-Editor das Moodle Standard-Interface zum Einbetten von Medien.

Audio und Video aufnehmen

Mit TinyMCE können Sie Audio- und Video-Dateien aufnehmen, die nach der Aufnahme an den Text angehängt werden. Jede Aufnahme umfasst drei Schritte:

1. Aufnahme beginnen: Um die Aufnahme zu starten, klicken Sie auf den Button "Aufnahme beginnen"
2. Aufnahme beenden: Um die Aufnahme zu beenden, klicken Sie auf den Button "Aufnahme beenden"
3. Aufnahme überprüfen: Sie können die Aufnahme mit Hilfe der Kontrollelemente anhören, bzw. ansehen und dann entweder an den Text anhängen oder neu aufzeichnen.

Die maximale Länge und Qualität (Bitrate) können von Administratoren konfiguriert werden.

Code-Beispiel einfügen/bearbeiten

Sie können Code-Beispiele mit farblich hervorgehobener Syntax in den editierbaren Bereich einfügen.

Sie können zwar die (Programmier-)Sprache oben auswählen; dies hat jedoch keinen Einfluss auf die Darstellungsweise des Codes. Der TinyMCE-Editor erlaubt auch die Formatierung von Code-Elementen (Format -> Code), was den ausgewählten Text in den intern festgelegten Code-Stil setzt.

Tabelle einfügen

Tiny bringt eine umfassende Funktionalität zur Tabellenverwaltung mit sich, um gitterartige Strukturen im Text zu verwalten. Zusätzlich zum Menüpunkt unter "Einfügen" befasst sich ein eigenes Hauptmenü mit Tabellen.

Sobald eine Tabelle hinzugefügt wurde, können einzelne Zellen, Zeilen und Spalten sowie die Eigenschaften der gesamten Tabelle angepasst werden. Folgende selbsterklärende Optionen, die alle standard HTML Tabellenoptionen unterstützen, sind verfügbar:

• Zelle
  • Zelleneigenschaften
  • Zellen verbinden
  • Zelle teilen
• Zeile
  • Neue Zeile darüber einfügen
  • Neue Zeile darunter einfügen
  • Zeile löschen
  • Zeileneigenschaften
  • Zeile ausschneiden
  • Zeile kopieren
  • Zeile darüber einfügen
  • Zeile darunter einfügen
• Spalte
  • Neue Spalte davor einfügen
  • Neue Spalte dahinter einfügen
  • Spalte löschen
  • Spalte ausschneiden
  • Spalte kopieren
  • Spalte davor einfügen
  • Spalte dahinter einfügen
• Tabelleneigenschaften
• Tabelle löschen

Der Tabelleneditor zeigt zudem kontextsensitive Menüs, wenn man verschiedene Tabellenelemente editiert.

Sonderzeichen einfügen

Mit dem Sonderzeichen-Picker lassen sich Buchstaben und Symbole einfügen (eine Reihe spezieller Unicode-Zeichen), die nur mühsam oder überhaupt nicht über das Keyboard zugänglich sind. Sie können nach einem Schlüsselwort suchen und / oder Kategorien durchsuchen.

Emojis einfügen

Fügen Sie Ihrem Inhalt einen Smiley hinzu: Der Emoji-Picker lässt Sie ein Piktogramm einfügen. Sie können nach einem Schlüsselwort suchen oder Kategorien durchsuchen.

HTML-Elemente einfügen

Die folgenden 4 HTML-Elemente werden durch Menüs in TinyMCE unterstützt:

• Horizontale Linie einfügen: Fügt dem Text eine horizontale Linie hinzu.
• Seitenumbruch einfügen: Fügt dem Text einen Seitenumbruch (<p>) hinzu.
• Geschütztes Leerzeichen einfügen: Fügt an der aktuellen Position des Cursors ein geschütztes Leerzeichen ( ) hinzu.
• Anker einfügen: Hierüber können dem Text Anker (manchmal Lesezeichen genannt) hinzugefügt werden. Über einen Dialog geben Sie einen String an, der dem HTML an der aktuellen Position des Cursors als Anker hinzugefügt wird. Wenn Sie etwa den Cursor vor einen Text "Moodle" setzen und dann auf die Option "Anker" klicken und im sich öffnenden Dialog "start" angeben, sieht das generierte HTML so aus: <p><a id="start"></a>Moodle</p>

Datum/Zeit einfügen

Die Option Datum/Zeit lässt Sie einfach das aktuelle Datum oder die aktuelle Zeit an der aktuellen Position des Cursors einfügen.

Welche Formatoptionen verfügbar sind, hängt von der gewählten Sprache ab.

Gleichungseditor

Wenn entweder der Filter MathJax oder der Filter TeX-Notation aktiviert sind (unter Website-Administration > Plugins > Filter > Filter verwalten), bietet TinyMCE eine Option Gleichungseditor.

Intern nutzt der Gleichungseditor die TeX-Notation, die entweder manuell oder interaktiv eingegeben werden kann. Die interaktiven Elemente sind in 4 Kategorien gruppiert (Operationen, Pfeile, Griechische Symbole und Weitere Symbole). Der Inhalt jedes Reiters kann mittels der Einstellungen für den Gleichungseditor konfiguriert werden.

Der untere Bereich des Editors zeigt eine Vorschau.

H5P-Inhalt konfigurieren

Sie können H5P-Inhalte mittels der Option H5P-Inhalt konfigurieren wie folgt einbetten:

1. Wählen Sie eine H5P-Datei aus dem Inhaltsspeicher aus
2. Wählen Sie aus, ob Sie eine Kopie erstellen oder einen Link zur Datei anlegen möchten
3. Klicken Sie auf 'Datei auswählen'
4. Konfigurieren Sie optional verschiedene H5P-Optionen (Taste herunterladen, Taste Einbetten, Taste Copyright)
5. Klicken Sie auf 'H5P-Inhalt einfügen'.

Durch diese Schritte wird die interne URL automatisch eingefügt. Alternativ können Sie eine interne oder externe URL auch manuell in das Feld eingeben.

Hinweis zur Option Link zur Datei: Wenn Sie eine Datei im Inhaltsspeicher bearbeiten, wird diese überall dort aktualisiert, wo ein Link zur Datei zum Einsatz kommt.

Tiny Werkzeuge

Die folgenden Werzeuge sind über das Menü Werkzeuge verfügbar:

Quellcode anzeigen

Das Pop-up-Fenster Quellcode zeigt den Code der Seite an; für gewöhnlich HTML oder JS. Der Code can im Klartext geändert werden; sobald das Fenster geschlossen wird, werden sämtliche Änderungen im WYSIWYG-Modus widergespiegelt.

Wortzähler

Das Pop-up-Fenster Wortzähler zeigt die Anzahl der Wörter und der Zeichen (mit und ohne Leerzeichen) für das gesamte Dokument sowie für den ausgewählten Text an.

Die Anzahl der Wörter wird auch in der Fußzeile des Editors angezeigt.

Tester zur Barrierefreiheit

Der automatische Tester zur Barrierefreiheit prüft den Text auf weit verbreitete Fehler im Text. Dabei geht es meist um Barrieren, die verhindern, dass verschiedene Personen - ob mit oder ohne individuelle Einschränkung jeglicher Art - einen gleichwertigen Zugang zu den dargestellten Informationen der Funktionalität haben. Der Tester prüft dabei auf:

• Bilder mit fehlendem oder leerem Alternativtext (sofern nicht als dekorativ ausgezeichnet)
• Kontrast zwischen Textfarbe und Hintergrundfarbe, s. WCAG AA guidelines
• Lange Textblöcke sind ausreichend in kleinere Abschnitte unterteilt
• Alle Tabellen benötigen Überschriften
• Tabellen sollten keine verbundenen Zellen enthalten, da diese nur schwer mit Screenreadern navigierbar sind.
• Alle Tabellen sollten Zeilen- oder Spaltenüberschriften enthalten.

Medien verwalten

Die dateiverwaltung zeigt alle Dateien, die in den Text eingebettet wurden.

Der obere Teil der Dateiverwaltung enthält die vertrauten Optionen zum Verwalten von Dateien; hier können Sie Dateien hinzufügen, herunterladen und löschen.

Dateien, die zwar angehängt wurden, aber nicht im Text verwendet werden, werden im unteren Bereich angezeigt.

Tastaturkürzel

Die folgenden Tastaturkürzel funktionieren im TinyMCE-Editor bei fast allen Browsern. Beachten Sie, dass viele Kürzel nur funktionieren, wenn Sie mit der Maus in den Editor klicken oder Inhalte markieren.

Editor-Kürzel

Windows Tastenkombination	Mac Tastenkombination	Funktion
Strg + Shift + f	⌘ + Shift + f	Vollbildschirm
Strg + c	⌘ + c	Kopieren
Strg + v	⌘ + v	Einfügen
Strg + Shift + v	⌘ + Shift + v	Einfügen ohne Formatierung (sehr nützlich ;-)
Strg + x	⌘ + x	Ausschneiden
Strg + z	⌘ + z	Rückgängig
Strg + y	⌘ + y	Wiederholen
Strg + a	⌘ + a	Alles auswählen
Strg + f	⌘ + f	Suchen und ersetzen
F3	F3	Finde nächste Stelle
Shift + F3	Shift + F3	Finde vorherige Stelle
Strg + b	⌘ + b	Fett
Strg + i	⌘ + i	Kursiv
Strg + u	⌘ + u	Unterstreichen
Strg + k	⌘ + k	Link einfügen / bearbeiten
Strg + Pfeil nach rechts	Option + Pfeil nach rechts	Zum Ende des nächsten Wortes gehen
Strg + Pfeil nach links	Option + Pfeil nach links	Zum Ende des vorherigen Wortes gehen
Strg + Shift + Pfeil nach rechts	Shift + Option + Pfeil nach rechts	Nächstes Wort oder Zeichen markieren
Strg + Shift + Pfeil nach links	Shift + Option + Pfeil nach links	Vorheriges Wort oder Zeichen markieren
Strg + Shift + pos1	⌘ + Shift + pos1	Vom Cursor bis zum Anfang der Seite alles markieren
Strg + Shift + ende	⌘ + Shift + ende	Vom Cursor bis zum Ende der Seite alles markieren
Strg + pos1	⌘ + Pfeil nach oben	Zum Anfang der Seite gehen
Strg + ende	⌘ + Pfeil nach unten	Zum Ende der Seite gehen
Strg + Backspace (Rücktaste)	⌘ + Backspace (Rücktaste)	Wort oder Zeichen links löschen
Strg + del	⌘ + del	Wort oder Zeichen rechts löschen
Strg + P	⌘ + P	drucken
Alt+Shift+1	Strg+Option+1	Überschrift 1
Alt+Shift+2	Strg+Option+2	Überschrift 2
Alt+Shift+3	Strg+Option+3	Überschrift 3
Alt+Shift+4	Strg+Option+4	Überschrift 4
Alt+Shift+5	Strg+Option+5	Überschrift 5
Alt+Shift+6	Strg+Option+6	Überschrift 6
Alt+Shift+7	Strg+Option+7	Absatz
Alt+Shift+8	Strg+Option+8	Div
Alt+Shift+9	Strg+Option+9	Adresse
Alt+0	Option+0	Hilfe (Liste der Tastaturkürzel)
Strg and +	⌘ and +	Zoom in (nicht spezifisch für den Editor, aber sehr hilfreich)
Strg and -	⌘ and -	Zoom out (nicht spezifisch für den Editor, aber sehr hilfreich)
Strg and 0	⌘ and 0	Zoom zurücksetzen (nicht spezifisch für den Editor, aber sehr hilfreich)
Doppelklick	Doppelklick	Wort auswählen
Dreifach-Klick	Dreifach-Klick	Zeile auswählen

Tastaturnavigation

Die Bereiche des äußeren UI des Editors - Menüleiste, Werkzeugleiste, Seitenleiste und Fußzeile - sind alle per Tastatur navigierbar.

Tastaturnavigation aktivieren

Es gibt mehrere Wege, um die Tastaturnavigation zu aktivieren:

• Menüleiste fokussieren: Alt + F9 (Windows) oder ⌥F9 (MacOS)
• Werkzeugleiste fokussieren: Alt + F10 (Windows) or ⌥F10 (MacOS)
• Fußzeile fokussieren: Alt + F11 (Windows) or ⌥F11 (MacOS)

Fokussieren Sie die Menüleiste oder die Werkzeugleiste, startet die Tastaturnavigation mit dem ersten Element der Menüleiste / Werkzeugleiste, welches grau hinterlegt wird. Fokussieren Sie die Fußzeile, startet die Tastaturnavigation beim ersten Element im Pfad, das durch einen Unterstrich hervorgehoben wird.

Zwischen UI-Bereichen bewegen

Wenn die Tastaturnavigation aktiv ist, kann per Tabulator der Fokus zum nächsten größeren UI-Bereich verschoben werden. Dies funktioniert für folgende Bereiche:

• Die Menüleiste
• Jede Gruppe innerhalb der Menüleiste
• Die Seitenleiste
• Den Elementpfad in der Fußzeile
• Den Wortzähler Toggle-Button in der Fußzeile
• Den Branding-Link in der Fußzeile
• Die Möglichkeit zum Vergößern und Verkleinern des Editors in der Fußzeile

Drücken Sie shift + tab um sich rückwärts durch dieselben Bereiche zu bewegen; nur die Fußzeile verhält sich hier anders: Wenn Sie den Elementpfad fokussieren und dann shift + tab drpcken, wird der Fokus zur ersten Gruppe in der Werkzeugleiste verschoben, nicht zur letzten.

Moving within UI sections

Keyboard navigation within UI sections can usually be achieved using the left and right arrow keys. This includes:

• moving between menus in the menubar
• moving between buttons in a toolbar group
• moving between items in the element path

In all these UI sections, keyboard navigation will cycle within the section. For example, focusing the last button in a toolbar group then pressing right arrow will move focus to the first item in the same toolbar group.

Executing buttons

To execute a button, navigate the selection to the desired button and hit space or enter.

Opening, navigating and closing menus

When focusing a menubar button or a toolbar button with a menu, pressing space, enter or down arrow will open the menu. When the menu opens the first item will be selected. To move up or down the menu, press the up or down arrow key respectively. This is the same for submenus, which can also be opened and closed using the left and right arrow keys.

To close any active menu, hit the escape key. When a menu is closed the selection will be restored to its previous selection. This also works for closing submenus.

Context toolbars and menus

To focus an open context toolbar such as the table context toolbar, press Ctrl + F9 (Windows) or ⌃F9 (MacOS).

Context toolbar navigation is the same as toolbar navigation, and context menu navigation is the same as standard menu navigation.

Dialog navigation

There are two types of dialog UIs in TinyMCE: tabbed dialogs and non-tabbed dialogs.

When a non-tabbed dialog is opened, the first interactive component in the dialog will be focused. Users can navigate between interactive components by pressing tab. This includes any footer buttons. Navigation will cycle back to the first dialog component if tab is pressed while focusing the last component in the dialog. Pressing shift + tab will navigate backwards.

When a tabbed dialog is opened, the first button in the tab menu is focused. Pressing tab will navigate to the first interactive component in that tab, and will cycle through the tab’s components, the footer buttons, then back to the tab button. To switch to another tab, focus the tab button for the current tab, then use the arrow keys to cycle through the tab buttons.

Accessibility shortcuts

This is a list of available keyboard shortcuts within the editor user interface.

Windows Command	Mac Command	Function
Enter / Spacebar	Enter / Spacebar	Execute command
Tab	Tab	Focus on next UI Element(such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item)
Shift+Tab	Shift+Tab	Focus on previous UI Element(such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item)
Right Arrow / Down Arrow	Right Arrow / Down Arrow	Focus next Control(such as: toolbar button, menu, or menu item)
Left Arrow / Up Arrow	Left Arrow / Up Arrow	Focus previous Control(such as: toolbar button, menu, or menu item)
Down Arrow / Spacebar	Down Arrow / Spacebar	Open menu or toolbar menu button
Spacebar	Spacebar	Open group toolbar button
Down Arrow	Down Arrow	Open split toolbar button
Shift+Enter	Shift+Enter	Open the popup menu on split toolbar buttons
Right Arrow	Right Arrow	Open submenu
Left Arrow / Esc	Left Arrow / Esc	Close submenu
Esc	Esc	Close dialog
Esc	Esc	Close menu
Esc	Esc	Move focus back to editor body

Note: Browsers and Screen Readers provide additional shortcuts within the editor context.

Site administration settings

Equation editor settings

The equation editor has 4 tabs: Operators, Arrows, Greek symbols, and Advanced. The commands that are available on each tab and their order can be configured in Site administration > Plugins > Text editors > TinyMCE editor > Equation editor settings.

For each group, the list of commands is shown in TeX format.

Tiny Record RTC plugin for Moodle

Tiny fully supports media recording through. Internally, RecordRTC is utilised, an open source JavaScript library using WebRTC for audio and video recording. To configure its settings, navigate to Site administration > Plugins > Text editors > TinyMCE editor > RecordRTC:

The following options have an impact on server resources, both in terms of bandwidth and disk usage:

• Allowed types: You can specify whether Audio and video recording are supported or Audio only or Video only. There are two capabilities to control access to the Atto buttons: tiny/recordrtc:recordaudio and tiny/recordrtc:recordvideo.
• Audio bitrate and Video bitrate: The lower the bitrates, the smaller the file sizes, and vice versa. The default bitrate for recorded audio (128000) should generate files of about 15 KB per minute; the default bitrate for recorded video (2500000) to files of approximately 20 MB per minute.
• Audio time limit in seconds and Video time limit in seconds: The default time limit is 2 minutes for audio and video recording. Again, the longer the maximum recording length, the bigger the resulting files.

Recordings are stored in subdirectories of $CFG->dataroot>/filedir. Ensure post_max_size and upload_max_filesize are configured in line with your expected maximum recording sizes.

General settings

The editor shows a small "Power by Tiny" icon in the footer that includes a link to the Tiny editor web site. You can show/hide this icon by enabling/disabling the Tiny branding option.