TinyMCE-Editor: Unterschied zwischen den Versionen

Aus MoodleDocs
Wechseln zu:Navigation, Suche
Hauptseite ► Moodle-Kurs verwalten ► Texte editieren ► TinyMCE-Editor
Texte editieren
Keine Bearbeitungszusammenfassung
 
(23 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{ÜberarbeitenNeu}}
{{Text editieren}}
{{Text editieren}}
{{Neu}}


==Was ist der TinyMCE-Editor?==
==Was ist der TinyMCE-Editor?==
Zeile 8: Zeile 6:
Die Moodle-Administration kann den Editor auf der Seite ''Website-Administration > Plugins > Texteditoren > Übersicht'' aktivieren, deaktivieren und als Standard-Editor festlegen.
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ü]] > [[Nutzerprofil|Profil]] > Profil bearbeiten''.
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ü]] > [[Nutzerprofil|Profil]] > Profil bearbeiten''.
 
{{MediaPlayer | url = https://youtu.be/Q-D6nWSusrY | desc = Überblick über den TinyMCE-Editor}}


'''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.
'''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.
[[File:TinyMCEtoolbar.png|center|TinyMCE Symbolleiste, aufgeklappt]]
[[File:TinyMCEtoolbar.png|center|TinyMCE Symbolleiste, aufgeklappt]]


== TinyMCE Symbolleiste ==
== 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):  
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):  
[[File:Tiny - Buttons.png|center|frameless|900x900px|]]
[[File:Tiny - Buttons41.png|center|frameless|900x900px|]]




Zeile 22: Zeile 21:
{| class="wikitable"
{| class="wikitable"
|+
|+
!#
!Button
!#
!#
!Button
!Button
Zeile 29: Zeile 30:
|1
|1
|Rückgängig
|Rückgängig
|9
|[[H5P|H5P-Inhalt konfigurieren]]
|18
|Aufzählung
|-
|2
|Wiederholen
|10
|10
|Linksbündig ausrichten
|Linksbündig ausrichten
|19
|Nummerierte Liste
|-
|-
|2
|3
|Wiederholen
|Fett
|11
|11
|Zentrieren
|Zentrieren
|20
|Gleichungseditor
|-
|-
|3
|4
|Fett
|Kursiv
|12
|12
|Rechtsbündig ausrichten
|Rechtsbündig ausrichten
|21
|Zweite Symbolzeile ein- und ausblenden
|-
|-
|4
|5
|Kursiv
|Bild
|13
|13
|Blocksatz
|Blocksatz
|
|
|-
|-
|5
|6
|Bild einfügen / Eigenschaften bearbeiten
|Multimedia
|14
|14
|Einzug verkleinern
|Links nach rechts
|
|
|-
|-
|6
|6
|[[Multimedia]] einfügen / Eigenschaften bearbeiten
|[[Audio|Audio aufnehmen]]
|15
|15
|Einzug vergrößern
|Rechts nach links
|
|
|-
|-
|7
|7
|[[Audio|Audio aufnehmen]]
|[[Video|Video aufnehmen]]
|16
|16
|Aufzählung
|Einzug verkleinern
|
|
|-
|-
|8
|8
|[[Video|Video aufnehmen]]  
|[[Link/URL]] einfügen
|17
|17  
|Nummerierte Liste
|Einzug vergrößern
|-
|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-Filter|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/moodle/tiny/h5p:addembed]] haben.


== Tiny features ==
Einige Symbole werden nur unter bestimmten Voraussetzungen angezeigt. Zum Beispiel wird das Gleichungseditor-Symbol nur angezeigt, wenn der [[MathJax-Filter|MathJax]] oder der [[TeX-Notation|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.
[[File:Tiny - Insert menu.png|thumb]]
The following features are available from the '''Insert''' menu:


=== Insert image ===
== TinyMCE Funktionen ==
WIP
[[Datei:menu einfuegen.jpg|thumb]]
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''.
[[Datei:tinyBildeigenschaften.jpg|center|500px|thumb]]
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'''.
[[Datei:tinyLinkEinfuegen.jpg|border|center|thumb|450px]]
=== 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 ===
[[Datei:tinyAudioAufnahme.jpg|250px|thumb|rechts]]
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:
# '''Aufnahme beginnen''': Um die Aufnahme zu starten, klicken Sie auf den Button "Aufnahme beginnen"
# '''Aufnahme beenden''': Um die Aufnahme zu beenden, klicken Sie auf den Button "Aufnahme beenden"
# '''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.
[[Datei:tinyCodeSchnipsel.jpg|600px|gerahmt|zentriert]]
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>
Code-Stil</code> setzt.


=== Insert / Edit Link ===
=== Tabelle einfügen ===
When inserting or editing a link to another (internal or external) page, you can provide the following elements:
TinyMCE bringt eine umfassende Funktionalität zur Tabellenverwaltung mit sich, um gitterartige Strukturen im Text zu verwalten. Zusätzlich zum Menüpunkt unter ''Tabelle einfügen'' befasst sich ein eigenes Hauptmenü mit Tabellen.
[[Datei:tiny tabelle einfuegen.jpg|border|center|frameless|450x450px]]
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
[[Datei:tiny tabelle contextMenu.jpg|border|center|frameless|600x600px]]
Der Tabelleneditor zeigt zudem kontextsensitive Menüs, wenn man verschiedene Tabellenelemente editiert.


* '''URL''': The address of the page to navigate to. If left empty, the option ''<top>'' and ''<bottom>'' are available
=== Sonderzeichen einfügen ===
* '''Text to display''': The text that is shown in the text, represented as a link
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.
* '''Title''': The text shown when hovering over the link
[[Datei:tiny sonderzeichen.jpg|border|center|frameless|450x450px]]
* '''Open link in...''': The page can either be opened in the '''Current Window''' or a '''New window'''
=== 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.
[[Datei:tiny emojis.jpg|border|center|frameless|450x450px]]
=== 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 (<code><nowiki><p></nowiki></code>) hinzu.
* '''Geschütztes Leerzeichen einfügen:''' Fügt an der aktuellen Position des Cursors ein geschütztes Leerzeichen (<code>&amp;nbsp;</code>) 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: <code><nowiki><p><a id="start"></a></nowiki>Moodle<nowiki></p></nowiki></code>
=== 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.
[[Datei:tiny datum zeit.jpg|border|center|frameless]]
Welche Formatoptionen verfügbar sind, hängt von der gewählten Sprache ab.  
=== Gleichungseditor ===
[[Datei:tiny latex.jpg|thumb]]
Wenn entweder der Filter [[MathJax-Filter|MathJax]] oder der Filter [[TeX-Notation]] aktiviert sind (unter ''Website-Administration > Plugins > Filter > Übersicht''), bietet TinyMCE eine Option Gleichungseditor.


[[File:Tiny - Link.png|border|center|frameless|450x450px]]
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.


=== Insert Multimedia ===
Der untere Bereich des Editors zeigt eine Vorschau.
WIP
=== H5P-Inhalt konfigurieren ===
Sie können H5P-Inhalte mittels der Option ''H5P-Inhalt konfigurieren'' wie folgt einbetten:
# Wählen Sie eine H5P-Datei aus dem Inhaltsspeicher aus
# Wählen Sie aus, ob Sie eine Kopie erstellen oder einen Link zur Datei anlegen möchten
# Klicken Sie auf 'Datei auswählen'
# Konfigurieren Sie optional verschiedene H5P-Optionen (Taste herunterladen, Taste Einbetten, Taste Copyright)
# 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.


=== Record audio ===
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.
WIP
== TinyMCE Werkzeuge ==
[[Datei:tiny werkzeuge.jpg|thumb]]
Die folgenden Werkzeuge 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 kann im Klartext geändert werden; sobald das Fenster geschlossen wird, werden sämtliche Änderungen im WYSIWYG-Modus widergespiegelt.
[[Datei:tiny werkzeug quellcode.jpg|center|frameless|900x900px]]


=== Record video ===
=== Wortzähler ===
WIP
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.
[[Datei:tiny werkzeug wortzaehler.jpg|border|center|frameless|600x600px]]
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. [https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines 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.


=== Insert / Edit code sample ===
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.
The Tiny editor lets you insert and embed syntax color highlighted code snippets into the editable area.
[[File:Tiny - Code Sample.png|border|center|frameless|600x600px]]
While you can select the (programming) language at the top, it doesn't have any impact on the way the code is displayed.


=== Insert Table ===
Dateien, die zwar angehängt wurden, aber nicht im Text verwendet werden, werden im unteren Bereich angezeigt.
Tiny comes with comprehensive table management functionality to handle grid-like structures in your text. In addition to the Insert table menu item, an entire main menu has been dedicated to tables.
[[Datei:tiny tool medien verwalten.jpg|border|center|frameless|600x600px]]
[[File:Tiny - Table.png|border|center|frameless|450x450px]]
Once a table has been added, you can customise individual cells, row, columns, and the properties of the entire table. The following self-explanatory menu items are available, all supporting standard HTML table options:


* Cell
== Tastaturkürzel ==
** Cell properties
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.
** Merge cells
=== Editor-Kürzel ===
** Split cells
* Row
** Insert row before
** Insert row after
** Delete row
** Row properties
** Cut row
** Copy row
** Paste row before
** Paste row after
* Column
** Insert column before
** Insert column after
** Delete column
** Cut column
** Copy column
** Paste column before
** Paste column after
* Table properties
* Delete table
 
[[File:Tiny - Table operations.png|border|center|frameless|600x600px]]
The table editor also shows context-sensitive menus when editing different table elements.
 
=== Insert special character ===
The special character picker lets you insert letters and symbols (a map of special unicode characters) that are difficult or impossible to access via your keyboard. You can either search by keyword and / or browse categories.
[[File:Tiny - Special character.png|border|center|frameless|450x450px]]
 
=== Insert Emojis ===
Bring a smiley to your content: The emoji picker lets you insert a pictogram. You can either search by keyword and / or browse categories.
[[File:Tiny - Emojis.png|border|center|frameless|450x450px]]
 
=== Insert horizontal line ===
Adds an HTML line to your text.
 
=== Insert page break ===
Adds a page break (<code><nowiki><p></nowiki></code>) to your text.
 
=== Insert nonbreaking space ===
Add an nonbreaking space (<code>&amp;nbsp;</code>) at the current cursor location.
 
=== Insert anchor ===
Insert anchors (sometimes referred to as a bookmarks) to your text.
 
Users will be prompted via a dialog box to enter a string. The string will be inserted into the HTML as an anchor id at the location of the cursor. For example, a user places their cursor at the beginning of "Moodle" and clicks on the anchor button and enters "start" in the dialog box. The resulting HTML will take the form of <code><nowiki><p><a id="start"></a></nowiki>Moodle<nowiki></p></nowiki></code>.
 
=== Insert date/time ===
The Insert date/time options lets you easily insert the current date and/or time into the editable area at the cursor insertion point.
[[File:Tiny - DateTime.png|border|center|frameless]]
The available format options depend on the selected language.
 
=== Equation editor ===
WIP
 
=== Configure H5P content ===
WIP
 
== Tiny tools ==
[[File:Tiny - Tools menu.png|thumb]]
The following tools are available in vie the '''Tools''' menu:
=== View source code ===
The source code pop up window displays the code of the page, usually HTML or JS. The code can be modified in plain text; once the window is closed, any changes will be reflected in the WYSIWYG mode.
[[File:Tiny - Source code.png|center|frameless|900x900px]]
=== Word count ===
The word pop up windows displays the number of words and the number of characters (with and without spaces) of the entire document and the selected text, respectively.
[[File:Tiny - Word count.png|border|center|frameless|600x600px|alt=]]
 
 
The number of words are also shown in the editor's footer.
=== Accessibility checker ===
The automated [[accessibility]] checker checks for some common errors in the text. These are usually elements in the way the text is constructed that can prevent all users from having equal access to information and functionality. The list of problems that the accessibility checker looks for is:
* Images with missing or empty alt text (unless they have the presentation role)
* Contrast of font colour and background colour meets [https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines WCAG AA guidelines]
* Long blocks of text are sufficiently broken up into headings
* All tables require captions
* Tables should not contain merged cells as they are difficult to navigate with screen readers
* All tables should contain row or column headers
=== Media Manager ===
The media manager shows all media files that have been embedded in the text.
 
The top part of the media manager shows the familiar file management element where you can add, download, and delete attached files.
 
Files that have been attached and deleted again are shown at the bottom half of the screen.
[[File:Tiny - Media manager.png|border|center|frameless|600x600px]]
== Keyboard shortcuts ==
The following keyboard shortcuts will work in the Tiny text editor in most browsers. Note that for many of these commands to work you need to either click in the text editor or select content in the text editor.
=== Editor shortcuts ===
{| class="wikitable"
{| class="wikitable"
!Windows Command
!Windows Tastenkombination
!Mac Command
!Mac Tastenkombination
!Function
!Funktion
|-
|-
|Ctrl + Shift + f
|Strg + Shift + f
|⌘ + Shift + f
|⌘ + Shift + f
|Full screen toggle
|Vollbildschirm
|-
|-
|Ctrl + c
|Strg + c
|⌘ + c
|⌘ + c
|Copy
|Kopieren
|-
|-
|Ctrl + v
|Strg + v
|⌘ + v
|⌘ + v
|Paste
|Einfügen
|-
|-
|Ctrl + Shift + v
|Strg + Shift + v
|⌘ + Shift + v
|⌘ + Shift + v
|Paste without formatting (very useful)
|Einfügen ohne Formatierung (sehr nützlich ;-)
|-
|-
|Ctrl + x
|Strg + x
|⌘ + x
|⌘ + x
|Cut
|Ausschneiden
|-
|-
|Ctrl + z
|Strg + z
|⌘ + z
|⌘ + z
|Undo
|Rückgängig
|-
|-
|Ctrl + y
|Strg + y
|⌘ + y
|⌘ + y
|Redo
|Wiederholen
|-
|-
|Ctrl + a
|Strg + a
|⌘ + a
|⌘ + a
|Select all
|Alles auswählen
|-
|-
|Ctrl + f
|Strg + f
|⌘ + f
|⌘ + f
|Find and replace
|Suchen und ersetzen
|-
|-
|F3
|F3
|<s>F3</s>
|<s>F3</s>
|Find next
|Finde nächste Stelle
|-
|-
|Shift + F3
|Shift + F3
|<s>Shift + F3</s>
|<s>Shift + F3</s>
|Find previous
|Finde vorherige Stelle
|-
|-
|Ctrl + b
|Strg + b
|⌘ + b
|⌘ + b
|Bold
|Fett
|-
|-
|Ctrl + i
|Strg + i
|⌘ + i
|⌘ + i
|Italics
|Kursiv
|-
|-
|Ctrl + u
|Strg + u
|⌘ + u
|⌘ + u
|Underline
|Unterstreichen
|-
|-
|Ctrl + k
|Strg + k
|⌘ + k
|⌘ + k
|Insert/edit link
|Link einfügen / bearbeiten
|-
|-
|Ctrl + Right arrow
|Strg + Pfeil nach rechts
|Option + Right arrow
|Option + Pfeil nach rechts
|Move to the end of the next word
|Zum Ende des nächsten Wortes gehen
|-
|-
|Ctrl + Left arrow
|Strg + Pfeil nach links
|Option + Left arrow
|Option + Pfeil nach links
|Move to the end of the previous word
|Zum Ende des vorherigen Wortes gehen
|-
|-
|Ctrl + Shift + Right arrow
|Strg + Shift + Pfeil nach rechts
|Shift + Option + Right arrow
|Shift + Option + Pfeil nach rechts
|Select the next word or letter
|Nächstes Wort oder Zeichen markieren
|-
|-
|Ctrl + Shift + Left arrow
|Strg + Shift + Pfeil nach links
|Shift + Option + Left arrow
|Shift + Option + Pfeil nach links
|Select the previous word or letter
|Vorheriges Wort oder Zeichen markieren
|-
|-
|Ctrl + Shift + Home
|Strg + Shift + pos1
|<s>⌘ + Shift + Home</s>
|<s>⌘ + Shift + pos1</s>
|Select from the cursor to the beginning of the page
|Vom Cursor bis zum Anfang der Seite alles markieren
|-
|-
|Ctrl + Shift + End
|Strg + Shift + ende
|<s>⌘ + Shift + End</s>
|<s>⌘ + Shift + ende</s>
|Select from the cursor to the end of the page
|Vom Cursor bis zum Ende der Seite alles markieren
|-
|-
|Ctrl + Home
|Strg + pos1
|⌘ + Up arrow
|⌘ + Pfeil nach oben
|Move to the beginning of the page
|Zum Anfang der Seite gehen
|-
|-
|Ctrl + End
|Strg + ende
|⌘ + Down arrow
|⌘ + Pfeil nach unten
|Move to the end of the page
|Zum Ende der Seite gehen
|-
|-
|Ctrl + Backspace
|Strg + Backspace (Rücktaste)
|<s>⌘ + Backspace</s>
|<s>⌘ + Backspace (Rücktaste)</s>
|Delete word or letter to the left
|Wort oder Zeichen links löschen
|-
|-
|Ctrl + Delete
|Strg + del
|<s>⌘ + Delete</s>
|<s>⌘ + del</s>
|Delete word or letter to the right
|Wort oder Zeichen rechts löschen
|-
|-
|Ctrl + P
|Strg + P
|⌘ + P
|⌘ + P
|Print
|drucken
|-
|-
|Alt+Shift+1
|Alt+Shift+1
|Ctrl+Option+1
|Strg+Option+1
|Header 1
|Überschrift 1
|-
|-
|Alt+Shift+2
|Alt+Shift+2
|Ctrl+Option+2
|Strg+Option+2
|Header 2
|Überschrift 2
|-
|-
|Alt+Shift+3
|Alt+Shift+3
|Ctrl+Option+3
|Strg+Option+3
|Header 3
|Überschrift 3
|-
|-
|Alt+Shift+4
|Alt+Shift+4
|Ctrl+Option+4
|Strg+Option+4
|Header 4
|Überschrift 4
|-
|-
|Alt+Shift+5
|Alt+Shift+5
|Ctrl+Option+5
|Strg+Option+5
|Header 5
|Überschrift 5
|-
|-
|Alt+Shift+6
|Alt+Shift+6
|Ctrl+Option+6
|Strg+Option+6
|Header 6
|Überschrift 6
|-
|-
|Alt+Shift+7
|Alt+Shift+7
|Ctrl+Option+7
|Strg+Option+7
|Paragraph
|Absatz
|-
|-
|Alt+Shift+8
|Alt+Shift+8
|Ctrl+Option+8
|Strg+Option+8
|Div
|Div
|-
|-
|Alt+Shift+9
|Alt+Shift+9
|Ctrl+Option+9
|Strg+Option+9
|Address
|Adresse
|-
|-
|Alt+0
|Alt+0
|Option+0
|Option+0
|Help dialogue (list of shortcuts)
|Hilfe (Liste der Tastaturkürzel)
|-
|-
|Ctrl and +
|Strg and +
|⌘ and +
|⌘ and +
|Zoom in (not specific to the editor, but very useful)
|Zoom in (nicht spezifisch für den Editor, aber sehr hilfreich)
|-
|-
|Ctrl and -
|Strg and -
|⌘ and -
|⌘ and -
|Zoom out (not specific to the editor, but very useful)
|Zoom out (nicht spezifisch für den Editor, aber sehr hilfreich)
|-
|-
|Ctrl and 0
|Strg and 0
|⌘ and 0
|⌘ and 0
|Reset zoom (not specific to the editor, but very useful)
|Zoom zurücksetzen (nicht spezifisch für den Editor, aber sehr hilfreich)
|-
|-
|Double-click
|Doppelklick
|Double-click
|Doppelklick
|Select word
|Wort auswählen
|-
|-
|Triple-click
|Dreifach-Klick
|Triple-click
|Dreifach-Klick
|Select line
|Zeile auswählen
|}
|}
=== Keyboard navigation ===
=== Tastaturnavigation ===
The sections of the outer UI of the editor - the menubar, toolbar, sidebar and footer - are all keyboard navigable.  
Die Bereiche des äußeren UI des Editors - Menüleiste, Werkzeugleiste, Seitenleiste und Fußzeile - sind alle per Tastatur navigierbar.  
==== Activating keyboard navigation ====
==== Tastaturnavigation aktivieren ====
There are multiple ways to activate keyboard navigation:
Es gibt mehrere Wege, um die Tastaturnavigation zu aktivieren:
* Focus the menubar: Alt + F9 (Windows) or ⌥F9 (MacOS)
* Menüleiste fokussieren: Alt + F9 (Windows) oder ⌥F9 (MacOS)
* Focus the toolbar: Alt + F10 (Windows) or ⌥F10 (MacOS)
* Werkzeugleiste fokussieren: Alt + F10 (Windows) or ⌥F10 (MacOS)
* Focus the footer: Alt + F11 (Windows) or ⌥F11 (MacOS)
* Fußzeile fokussieren: Alt + F11 (Windows) or ⌥F11 (MacOS)
Focusing the menubar or toolbar will start keyboard navigation at the first item in the menubar or toolbar, which will be highlighted with a gray background. Focusing the footer will start keyboard navigation at the first item in the element path, which will be highlighted with an underline.
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.
==== Moving between UI sections ====
==== Zwischen UI-Bereichen bewegen ====
When keyboard navigation is active, pressing tab will move the focus to the next major section of the UI, where applicable. These sections are:
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:
* the menubar
* Die Menüleiste
* each group of the toolbar
* Jede Gruppe innerhalb der Menüleiste
* the sidebar
* Die Seitenleiste
* the element path in the footer
* Den Elementpfad in der Fußzeile
* the wordcount toggle button in the footer
* Den Wortzähler Toggle-Button in der Fußzeile
* the branding link in the footer
* Den Branding-Link in der Fußzeile
* the editor resize handle in the footer
* Die Möglichkeit zum Vergößern und Verkleinern des Editors in der Fußzeile
Pressing shift + tab will move backwards through the same sections, except when moving from the footer to the toolbar. Focusing the element path then pressing shift + tab will move focus to the first toolbar group, not the last.
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 ====
==== Innerhalb von UI-Bereichen bewegen ====
Keyboard navigation within UI sections can usually be achieved using the left and right arrow keys. This includes:
In der Regel können Sie innerhalb von UI-Bereichen mittels Pfeiltasten navigieren. Dies umfasst:
* moving between menus in the menubar
* Bewegung zwischen Menüs in der Menüleiste
* moving between buttons in a toolbar group
* Bewegung zwischen Buttons in der Werkzeugleiste
* moving between items in the element path
* Bewegung zwischen Elementen im Elementpfad
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.
In all diesen UI-Bereichen dreht sich die Navigation im Kreis. Ist etwa der letzte Button in einer Gruppe in der Werkzeuleiste im Fokus und Sie drücken auf den Pfeil nach rechts, verschieben Sie damit den Fokus auf das erste Element der gleichen Gruppe in der Werzeugleiste.
==== Executing buttons ====
==== Buttons ausführen ====
To execute a button, navigate the selection to the desired button and hit space or enter.
Um einen Button auszuführen, navigieren Sie zum Button und drücken die Leer- oder die Enter-Taste.
==== Opening, navigating and closing menus ====
==== Öffnen, Navigieren und Schließen von Menüs ====
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.
Wenn der Fokus auf einem Button in der Menüleiste liegt, öffnen Sie das Menü durch Leer, Enter oder Pfeil nach unten. Wenn sich das Menü öffnet, ist zunächst das erste Element ausgewählt. Mit den Pfeiltasten nach oben und unten können Sie sich im Menü auf- und abbewegen. Für Untermenüs gilt das analog; diese können durch die Pfeiltasten nach links und rechts geöffnet werden.


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.
Ein aktives Menü schließen Sie mit der Escape-Taste. Wenn ein menü geschlossen wird, wird dabei die vorherige Auswahl wiederhergestellt. Das funktioniert auch für Untermenüs.
==== Context toolbars and menus ====
==== Kontext-Werkzeugleisten und -Menüs ====
To focus an open context toolbar such as the table context toolbar, press Ctrl + F9 (Windows) or ⌃F9 (MacOS).
Um eine kontextbezogene Werzeugleiste, wie es sie etwa für Tabellen gibt, zu fokussieren, drücken Sie Strg + F9 (Windows) oder ⌃F9 (MacOS).


Context toolbar navigation is the same as toolbar navigation, and context menu navigation is the same as standard menu navigation.
Die Navigation funktioniert analog zu den Werkzeugleisten und Standard-Menüs.
==== Dialog navigation ====
==== Navigation von Dialogen ====
There are two types of dialog UIs in TinyMCE: tabbed dialogs and non-tabbed dialogs.
Es gibt zwei Typen von Dialog-UIs in TinyMCE: Dialoge mit Registerkarten und Dialoge ohne Registerkarten.


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.
Wenn ein Dialog ohne Registerkarten geöffnet wird, wird die erste interaktive Komponente im Dialog fokussiert. Sie können mit Tab zwischen interaktiven Komponenten navigieren. Das schließt Buttons in der Fußzeile mit ein. Vom der letzten Komponente springen Sie so wieder zur ersten. Mit shift + tab navigieren Sie rückwärts.


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.
Wenn ein Dialog mit Registerkarten geöffnet wird, wird die erste Registerkarte fokussiert. Wie beim Dialog ohne Registerkarten können Sie mit Tab navigieren. Zwischen verschiedenen Registerkarten navigieren Sie mit den Pfeiltasten nach links und rechts.
==== Accessibility shortcuts ====
==== Tastenkombinationen zur Barrierefreiheit ====
This is a list of available keyboard shortcuts within the editor user interface.
Dies ist eine Liste verfügbarer Tastenkombinationen innerhalb des Editor-UI:
{| class="wikitable"
{| class="wikitable"
!Windows Command
!Windows Tastenkombination
!Mac Command
!Mac Tastenkombination
!Function
!Funktion
|-
|-
|Enter / Spacebar
|Enter / Leertaste
|Enter / Spacebar
|Enter / Leertaste
|Execute command
|Befehl ausführen
|-
|-
|Tab
|Tab
|Tab
|Tab
|Focus on next UI Element(such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item)
|Nächstes UI Element fokussieren (wie etwa: Menüleiste, Werzeugleiste, Gruppe in der Werkezeugleiste)
|-
|-
|Shift+Tab
|Shift+Tab
|Shift+Tab
|Shift+Tab
|Focus on previous UI Element(such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item)
|Vorheriges UI Element fokussieren (wie etwa: Menüleiste, Werzeugleiste, Gruppe in der Werkezeugleiste)
|-
|-
|Right Arrow / Down Arrow
|Pfeil nach rechts / Pfeil nach unten
|Right Arrow / Down Arrow
|Pfeil nach rechts / Pfeil nach unten
|Focus next Control(such as: toolbar button, menu, or menu item)
|Nächstes Steuerelement fokussieren (wie etwa: Button in der Werkzeugleiste, Menü, oder Menü-Option)
|-
|-
|Left Arrow / Up Arrow
|Pfeil nach links / Pfeil nach oben
|Left Arrow / Up Arrow
|Pfeil nach links / Pfeil nach oben
|Focus previous Control(such as: toolbar button, menu, or menu item)
|Vorheriges Steuerelement fokussieren (wie etwa: Button in der Werkzeugleiste, Menü, oder Menü-Option)
|-
|-
|Down Arrow / Spacebar
|Pfeil nach unten / Leertaste
|Down Arrow / Spacebar
|Pfeil nach unten / Leertaste
|Open menu or toolbar menu button
|Button im Menü oder Menü der Werkzeugleiste öffnen
|-
|-
|Spacebar
|Leertaste
|Spacebar
|Leertaste
|Open group toolbar button
|Button in Gruppe der Werkzeugleiste öffnen
|-
|-
|Down Arrow
|Pfeil nach unten
|Down Arrow
|Pfeil nach unten
|Open split toolbar button
|Button in der geteilten Werkzeugleiste öffnen
|-
|-
|Shift+Enter
|Shift+Enter
|Shift+Enter
|Shift+Enter
|Open the popup menu on split toolbar buttons
|Pou-up-Menü bei geteilten Buttons der Werkzeugleiste öffnen
|-
|-
|Right Arrow
|Pfeil nach rechts
|Right Arrow
|Pfeil nach rechts
|Open submenu
|Untermenü öffnen
|-
|-
|Left Arrow / Esc
|Pfeil nach links / Esc
|Left Arrow / Esc
|Pfeil nach links / Esc
|Close submenu
|Untermenü schließen
|-
|-
|Esc
|Esc
|Esc
|Esc
|Close dialog
|Dialog schließen
|-
|-
|Esc
|Esc
|Esc
|Esc
|Close menu
|Menü schließen
|-
|-
|Esc
|Esc
|Esc
|Esc
|Move focus back to editor body
|Fokus zurück auf den Textkörper verschieben
|}
|}
'''Note''': Browsers and Screen Readers provide additional shortcuts within the editor context.
'''Hinweis''': Browser und Screenreaders stellen weitere Tastenkombinationen innerhalb des Kontext des Editors zur Verfügung.
==Site administration settings==
==Systemweite Einstellungen==
=== Equation editor settings ===
=== Allgemeine Einstellungen ===
[[File:Tiny - Equation editor settings.png|thumb]]
Auf der Seite ''Website-Administration > Plugins > Texteditoren > Editor TinyMCE > Allgemeine Einstellungen'' können Sie verschiedene Funktionalitäten aktivieren bzw. deaktivieren, z.B. ('''Neu in 4.3''') den Tiny HTML-Formatierer, Tiny - Kein Auto-Link und Sie können auf die Einstellungen des kostenpflichtigen Tiny Premium zugreifen.
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''.
 
Sie können auch das TinyMCE-Logo abschalten, das in der Fußzeile des Editors angezeigt wird.
 
====Tiny Premium====
Wenn Sie Tiny Premium gekauft haben oder eine freie Testversion von [https://www.tiny.cloud/ Tiny Cloud] haben, geben Sie auf der Seite''Website-Administration > Plugins > Texteditoren > Editor TinyMCE > Tiny Premium'' den API Key ein.
 
Beachten Sie, dass die Bezahlung bei Tiny Premium auf der Basis der Klickzahlen (Anzahl der Editor-Aufrufe) erfolgt.
 
=== TinyMCE Gleichungseditor ===
[[Datei:Tiny - Equation editor settings.png|thumb|alternativtext=|288x288px]]
Der Gleichungseditor hat vier Registerkarten: ''Operatoren'', ''Pfeile'', ''Griechische Symbole'' und ''Weitere Symbole''. Die Befehle, die in jeder Registerkarte verfügbar sind sowie deren Reihenfolge kann unter ''Website-Administration > Plugins > Texteditoren > Editor TinyMCE > Einstellungen für Tiny Gleichungen'' konfiguriert werden.
 
Für jede Gruppe werden die Befehle im TeX Format angezeigt.


For each group, the list of commands is shown in TeX format.
=== Tiny Record RTC ===
=== Tiny Record RTC plugin for Moodle ===
[[Datei:Tiny_-_RTC_settings.png|thumb]]
[[File:Tiny - RTC settings.png|thumb]]
Tiny unterstütz die Aufzeichnung von Audio und Video. Intern wird hierfür RecordRTC gentutz, eine open source JavaScript Bibliothek, die WebRTC für das Aufzeichnen von Audio and Video verwendet. Die Einstellungen hierfür findne Sie unter ''Website-Administration > Plugins > Texteditoren > Editor TinyMCE > Tiny RecordRTC''
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:
Die folgenden Optionen haben einen Einfluss auf Server-Ressourcen - sowohl auf die Bandbreite als auch auf die Festplattennutzung:
* '''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''.
* '''Aufnahmetyp''': Sie können festlegen, ob Asuzeichnungen für '''Audio und video,''' '''Nur Audio''' oder '''Nur Video''' möglich ist. Es gibt zwei capabilities, um den Zugriff zu den Buttons zu steuern: ''tiny/recordrtc:recordaudio'' und ''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-Bitrate''' und '''Video Bitrate''': Je kleiner die Bitraten, desto kleiner die Dateigröße und umgekehrt. Die Default-Bitrate für Audioaufnahmen (128000) sollte Dateien mit einer Größe von etwa 15 KB pro Minute erzeugen; die Default-Bitrate für Videoaufnahmen (2500000) Dateien mit einer Größe von etwa 20 MB pro 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.  
* '''Audio-Zeitlimit''' und '''Video-Zeitlimit''': Per Default sind die Aufnahmezeiten für Audio und Video auf 2 Minutes begrenzt. Auch hier gilt: Je länger die Aufnahme, desto größer die resultierenden Dateien.


Aufnahmen werden in Unterordnern von ''$CFG->dataroot/filedir'' gespeichert. Stellen Sie sicher, dass ''post_max_size'' und ''upload_max_filesize'' so konfiguriert sind, dass sie Ihre erwarteten maximalen Dateigrößen erlauben.


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 ===
[[File:Tiny - General settings.png|thumb]]
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.
[[es:Editor TinyMCE]]
[[es:Editor TinyMCE]]
[[de:TinyMCE-Editor]]
[[en:TinyMCE editor]]
[[fr:Éditeur TinyMCE]]
[[fr:Éditeur TinyMCE]]

Aktuelle Version vom 24. April 2024, 10:32 Uhr


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.

Video laden
YouTube
Überblick über den TinyMCE-Editor

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, aufgeklappt

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):

Datei:Tiny - Buttons41.png


Hier ist die Liste aller Symbole:

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

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

menu einfuegen.jpg

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.
tinyBildeigenschaften.jpg

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.
tinyLinkEinfuegen.jpg

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

Datei:tinyAudioAufnahme.jpg

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.

Datei:tinyCodeSchnipsel.jpg

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

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

Datei:tiny tabelle einfuegen.jpg

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
Datei:tiny tabelle contextMenu.jpg

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.

Datei:tiny sonderzeichen.jpg

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.

Datei:tiny emojis.jpg

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 (&nbsp;) 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.

Datei:tiny datum zeit.jpg

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

Gleichungseditor

Datei:tiny latex.jpg

Wenn entweder der Filter MathJax oder der Filter TeX-Notation aktiviert sind (unter Website-Administration > Plugins > Filter > Übersicht), 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.

TinyMCE Werkzeuge

Datei:tiny werkzeuge.jpg

Die folgenden Werkzeuge 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 kann im Klartext geändert werden; sobald das Fenster geschlossen wird, werden sämtliche Änderungen im WYSIWYG-Modus widergespiegelt.

Datei:tiny werkzeug quellcode.jpg

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.

Datei:tiny werkzeug wortzaehler.jpg

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.

Datei:tiny tool medien verwalten.jpg

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.

Innerhalb von UI-Bereichen bewegen

In der Regel können Sie innerhalb von UI-Bereichen mittels Pfeiltasten navigieren. Dies umfasst:

  • Bewegung zwischen Menüs in der Menüleiste
  • Bewegung zwischen Buttons in der Werkzeugleiste
  • Bewegung zwischen Elementen im Elementpfad

In all diesen UI-Bereichen dreht sich die Navigation im Kreis. Ist etwa der letzte Button in einer Gruppe in der Werkzeuleiste im Fokus und Sie drücken auf den Pfeil nach rechts, verschieben Sie damit den Fokus auf das erste Element der gleichen Gruppe in der Werzeugleiste.

Buttons ausführen

Um einen Button auszuführen, navigieren Sie zum Button und drücken die Leer- oder die Enter-Taste.

Öffnen, Navigieren und Schließen von Menüs

Wenn der Fokus auf einem Button in der Menüleiste liegt, öffnen Sie das Menü durch Leer, Enter oder Pfeil nach unten. Wenn sich das Menü öffnet, ist zunächst das erste Element ausgewählt. Mit den Pfeiltasten nach oben und unten können Sie sich im Menü auf- und abbewegen. Für Untermenüs gilt das analog; diese können durch die Pfeiltasten nach links und rechts geöffnet werden.

Ein aktives Menü schließen Sie mit der Escape-Taste. Wenn ein menü geschlossen wird, wird dabei die vorherige Auswahl wiederhergestellt. Das funktioniert auch für Untermenüs.

Kontext-Werkzeugleisten und -Menüs

Um eine kontextbezogene Werzeugleiste, wie es sie etwa für Tabellen gibt, zu fokussieren, drücken Sie Strg + F9 (Windows) oder ⌃F9 (MacOS).

Die Navigation funktioniert analog zu den Werkzeugleisten und Standard-Menüs.

Navigation von Dialogen

Es gibt zwei Typen von Dialog-UIs in TinyMCE: Dialoge mit Registerkarten und Dialoge ohne Registerkarten.

Wenn ein Dialog ohne Registerkarten geöffnet wird, wird die erste interaktive Komponente im Dialog fokussiert. Sie können mit Tab zwischen interaktiven Komponenten navigieren. Das schließt Buttons in der Fußzeile mit ein. Vom der letzten Komponente springen Sie so wieder zur ersten. Mit shift + tab navigieren Sie rückwärts.

Wenn ein Dialog mit Registerkarten geöffnet wird, wird die erste Registerkarte fokussiert. Wie beim Dialog ohne Registerkarten können Sie mit Tab navigieren. Zwischen verschiedenen Registerkarten navigieren Sie mit den Pfeiltasten nach links und rechts.

Tastenkombinationen zur Barrierefreiheit

Dies ist eine Liste verfügbarer Tastenkombinationen innerhalb des Editor-UI:

Windows Tastenkombination Mac Tastenkombination Funktion
Enter / Leertaste Enter / Leertaste Befehl ausführen
Tab Tab Nächstes UI Element fokussieren (wie etwa: Menüleiste, Werzeugleiste, Gruppe in der Werkezeugleiste)
Shift+Tab Shift+Tab Vorheriges UI Element fokussieren (wie etwa: Menüleiste, Werzeugleiste, Gruppe in der Werkezeugleiste)
Pfeil nach rechts / Pfeil nach unten Pfeil nach rechts / Pfeil nach unten Nächstes Steuerelement fokussieren (wie etwa: Button in der Werkzeugleiste, Menü, oder Menü-Option)
Pfeil nach links / Pfeil nach oben Pfeil nach links / Pfeil nach oben Vorheriges Steuerelement fokussieren (wie etwa: Button in der Werkzeugleiste, Menü, oder Menü-Option)
Pfeil nach unten / Leertaste Pfeil nach unten / Leertaste Button im Menü oder Menü der Werkzeugleiste öffnen
Leertaste Leertaste Button in Gruppe der Werkzeugleiste öffnen
Pfeil nach unten Pfeil nach unten Button in der geteilten Werkzeugleiste öffnen
Shift+Enter Shift+Enter Pou-up-Menü bei geteilten Buttons der Werkzeugleiste öffnen
Pfeil nach rechts Pfeil nach rechts Untermenü öffnen
Pfeil nach links / Esc Pfeil nach links / Esc Untermenü schließen
Esc Esc Dialog schließen
Esc Esc Menü schließen
Esc Esc Fokus zurück auf den Textkörper verschieben

Hinweis: Browser und Screenreaders stellen weitere Tastenkombinationen innerhalb des Kontext des Editors zur Verfügung.

Systemweite Einstellungen

Allgemeine Einstellungen

Auf der Seite Website-Administration > Plugins > Texteditoren > Editor TinyMCE > Allgemeine Einstellungen können Sie verschiedene Funktionalitäten aktivieren bzw. deaktivieren, z.B. (Neu in 4.3) den Tiny HTML-Formatierer, Tiny - Kein Auto-Link und Sie können auf die Einstellungen des kostenpflichtigen Tiny Premium zugreifen.

Sie können auch das TinyMCE-Logo abschalten, das in der Fußzeile des Editors angezeigt wird.

Tiny Premium

Wenn Sie Tiny Premium gekauft haben oder eine freie Testversion von Tiny Cloud haben, geben Sie auf der SeiteWebsite-Administration > Plugins > Texteditoren > Editor TinyMCE > Tiny Premium den API Key ein.

Beachten Sie, dass die Bezahlung bei Tiny Premium auf der Basis der Klickzahlen (Anzahl der Editor-Aufrufe) erfolgt.

TinyMCE Gleichungseditor

Der Gleichungseditor hat vier Registerkarten: Operatoren, Pfeile, Griechische Symbole und Weitere Symbole. Die Befehle, die in jeder Registerkarte verfügbar sind sowie deren Reihenfolge kann unter Website-Administration > Plugins > Texteditoren > Editor TinyMCE > Einstellungen für Tiny Gleichungen konfiguriert werden.

Für jede Gruppe werden die Befehle im TeX Format angezeigt.

Tiny Record RTC

Tiny - RTC settings.png

Tiny unterstütz die Aufzeichnung von Audio und Video. Intern wird hierfür RecordRTC gentutz, eine open source JavaScript Bibliothek, die WebRTC für das Aufzeichnen von Audio and Video verwendet. Die Einstellungen hierfür findne Sie unter Website-Administration > Plugins > Texteditoren > Editor TinyMCE > Tiny RecordRTC

Die folgenden Optionen haben einen Einfluss auf Server-Ressourcen - sowohl auf die Bandbreite als auch auf die Festplattennutzung:

  • Aufnahmetyp: Sie können festlegen, ob Asuzeichnungen für Audio und video, Nur Audio oder Nur Video möglich ist. Es gibt zwei capabilities, um den Zugriff zu den Buttons zu steuern: tiny/recordrtc:recordaudio und tiny/recordrtc:recordvideo.
  • Audio-Bitrate und Video Bitrate: Je kleiner die Bitraten, desto kleiner die Dateigröße und umgekehrt. Die Default-Bitrate für Audioaufnahmen (128000) sollte Dateien mit einer Größe von etwa 15 KB pro Minute erzeugen; die Default-Bitrate für Videoaufnahmen (2500000) Dateien mit einer Größe von etwa 20 MB pro Minute.
  • Audio-Zeitlimit und Video-Zeitlimit: Per Default sind die Aufnahmezeiten für Audio und Video auf 2 Minutes begrenzt. Auch hier gilt: Je länger die Aufnahme, desto größer die resultierenden Dateien.

Aufnahmen werden in Unterordnern von $CFG->dataroot/filedir gespeichert. Stellen Sie sicher, dass post_max_size und upload_max_filesize so konfiguriert sind, dass sie Ihre erwarteten maximalen Dateigrößen erlauben.

Abgerufen von „https://docs.moodle.org/404/de/index.php?title=TinyMCE-Editor&oldid=25006“
Powered by MediaWiki