TinyMCE-Editor: Unterschied zwischen den Versionen

Wechseln zu: Navigation, Suche
(24 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
Zeile 1: Zeile 1:
 
{{Text editieren}}
 
{{Text editieren}}
 +
Der [[TinyMCE-Editor]] ist ein Text-Editor-Plugin. Es kann von der Moodle-Administration auf der Seite ''Website-Administration'' (oder im Block ''[[Einstellungen-Block|Einstellungen]]) > Website-Administration'')'' > Plugins > Texteditoren > Übersicht'' aktiviert, deaktiviert oder als Standard-Editor gesetzt werden kann. 
  
Der Text-Editor (manchmal auch HTML- oder TinyMCE-Editor genannt) stellt einige Symbole zur Verfügung, die beim Erstellen von formatierten Texten nützlich sind. Die meisten Symbole sollten aus bekannten Textverarbeitungsprogrammen, wie z.B. Word bekannt sein.
+
Nutzer/innen können in ihrem Profil den TinyMCE als bevorzugten Editor wählen (anstelle des Standard-Editors  [[Text-Editor|Atto]]): ''[[Nutzermenü]] > [[Nutzerprofil|Profil]] > Profil bearbeiten''.
 
 
==Symbolleisten ein- und ausblenden==
 
{{Neu}}
 
Der [[Text-Editor]] wird zunächst mit einer Symbolzeile angezeigt.
 
 
 
[[Image:editor.jpg]]
 
 
 
Klickt man auf das vordere Symbol, erscheinen weitere Symbolzeilen (erweiterte Darstellung).
 
 
 
[[Image:editor_exp.jpg]]
 
  
 
==Liste der Symbole==
 
==Liste der Symbole==
Zeile 19: Zeile 10:
  
 
Zeile 1
 
Zeile 1
*[[Image:HTML_editor_group_font_style.png]] - Schriftart, Schriftgröße, Überschrift
+
 
*[[Image:HTML_editor_group_undo_redo.png]] - Rückgängig / Wiederholen (Schritt vor Schritt zurück)
+
[[Image:tinymcerow1.png]]
*[[Image:HTML_editor_group_find_replace.png]] - Suchen und Ersetzen
+
 
*[[Image:HTML_editor_group_fullscreen_1.png]] Vollbildschirm
+
*1 - Symbolleisten ein-/ausblenden
 +
*2 - Absatzformatierung
 +
*3 - Fett
 +
*4 - Kursiv
 +
*5 - Unsortierte Liste einfügen
 +
*6 - Geordnete Liste einfügen
 +
*7 - Link einfügen/bearbeiten
 +
*8 - Link entfernen
 +
*9 - Autoverlinkung verhindern
 +
*10 - Bild einfügen/bearbeiten
 +
*11 - Emoticon einfügen
 +
*12 - Medien einfügen
 +
*13 - Eingebettete Dateien verwalten
  
 
Zeile 2
 
Zeile 2
*[[Image:HTML editor group text effects.png]] - Texthervorhebungen (fett, kursiv, unterstrichen, hochgestellt, tiefgestellt)
+
 
*[[Image:HTML editor group line format.png]] - Textsatz (linksbündig, zentriert, rechtsbündig)
+
[[Image:tinymcerow2.png]]
*[[Image:HTML_editor_group_formatting.png]] - Formattierungen
+
 
*[[Image:HTML_editor_group_color.png]] - Farben
+
*1 - Rückgängig
*[[Image:HTML_editor_group_paragraph.png]] - rechts- und linksbündige Absätze
+
*2 - Wiederholen
 +
*3 - Unterstrichen
 +
*4 - Durchgestrichen
 +
*5 - Tiefgestellt
 +
*6 - Hochgestellt
 +
*7 - Linksbündig
 +
*8 - Zentriert
 +
*9 - Rechtsbündig
 +
*10 - Ausrücken
 +
*11 - Einrücken
 +
*12 - Textfarbe
 +
*13 - Hintergrundfarbe
 +
*14 - Schrift von links nach rechts
 +
*15 - Schrift von rechts nach links
  
 
Zeile 3
 
Zeile 3
*[[Image:HTML_editor_group_lists.png]] - Aufzählungen und Einrückungen
+
 
*[[Image:HTML_editor_group_link.png]] - Verlinkungen
+
[[Image:tinymcerow3.png]]
*[[Image:HTML_editor_group_insert.png]] - Einfügen (Bilder, Multimedia, Formeln, geschütztes Leerzeichen, Sonderzeichen, Tabellen)
+
 
*[[Image:HTML_editor_group_HTML_spell.png]] - HTML-Quellcode und Rechtschreibprüfung
+
*1 - Schriftart
 +
*2 - Schriftgröße
 +
*3 - HTML-Code bearbeiten
 +
*4 - Suchen
 +
*5 - Suchen/Ersetzen
 +
*6 - Geschütztes Leerzeichen einfügen
 +
*7 - Sonderzeichen einfügen
 +
*8 - Tabelle erstellen/bearbeiten
 +
*9 - Quellcode bereinigenAls unformatierten Text einfügen
 +
*10 - Formatierungen entfernen
 +
*11 - Als unformatierten Text einfügen
 +
*12 - Als formatierten Text einfügen
 +
*13 - Vollbildschirm
  
 
==Spezialeffekte==
 
==Spezialeffekte==
Zeile 53: Zeile 81:
 
</gallery>
 
</gallery>
  
===Einfügen===
+
===Tabelle einfügen===
[[Image:imagesHTML.jpg]]
+
Tabellen werden mittel Tabellen-Symbol (8, 3.Zeile) eingefügt.
  
* 1 - Bilddatei einfügen - mit Hilfe des [[Datei-Browser]]s
+
Tabellenränder sind wichtig für die Lesbarkeit einer Tabelle. Sollten sie nicht richtig angezeigt werden, fügen Sie die Ränder manuell ein:
* 2 - Emoticon einfügen
+
#Markieren Sie alle Zellen der Tabelle.
* 3 - Multimedia einfügen - mit Hilfe des [[Datei-Browser]]s
+
#Klicken Sie die rechte Maustaste und wählen Sie im Kontextmenü den Punkt ''Eigenschaften der Tabelle'' aus.
* 4 - Formel - mit Hilfe des JavaScript-Editors
+
#Klicken Sie auf den Reiter ''Erweitert''.
* 5 - geschütztes Leerzeichen einfügen
+
#Wählen Sie einen ''Rahmen'' (z.B. ''alle 4 Seiten (Box)''), ein ''Gitter'' (z.B. ''zwischen allen Zellen''), eine ''Rahmenfarbe'' (z.B. schwarz).
* 6 - Sonderzeichen einfügen
+
#Klicken Sie auf den Button ''Aktualisieren''.
* 7 - Tabelle einfügen
 
 
 
 
 
====Datei-Browser ====
 
[[Image:Datei_hinzufügen.jpg]]
 
 
 
====Formel-Editor====
 
[[Image:Formeleditor.jpg]]
 
 
 
====Sonderzeichen====
 
[[Image:Sonderzeichen.jpg]]
 
 
 
====Tabelle====
 
<gallery widths="300px">
 
Image:Tabelle_allgemein.jpg|Allgemein
 
Image:Tabelle_erweiter.jpg|Erweitert
 
</gallery>
 
  
 
==Systemweite Einstellungen==
 
==Systemweite Einstellungen==
 +
Als Administrator/in können Sie verschiedene Einstellungen für den TinyMCE Editor vornehmen.
  
===Texteditoren verwalten===
+
===Grundeinstellungen===
Administrator/innen können verschiedene Text-Editoren in Moodle aktivieren oder deaktivieren. Klicken Sie dazu im Block ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > Übersicht''.
+
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Grundeinstellungen'' gibt es folgende Konfigurationsmöglichkeiten:
Standardmäßig ist der TinyMCE Editor aktiviert.
 
 
 
====TinyMCE Editor====
 
Als Administrator/in können Sie verschiedene Einstellungen für den TinyMCE Editor vornehmen.
 
  
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > TinyMCE Editor > Allgemeine Einstellungen'' gibt es folgende Konfigurationsmöglichkeiten:
+
====Plugins====
 +
Standardmäßig gibt es in der Symbolleiste des Text-Editors Buttons für
 +
*''Hilfe per CTRL+Rechtsklick
 +
*''Formel einfügen''
 +
*''Eingebettete Dateien verwalten'' - bietet Zugriff auf das Repository [[Eingebettete Dateien]]
 +
*''Emoticon einfügen''
 +
*''Bild einfügen''
 +
*''Medien einfügen''
 +
*''Autoverlinkung verhindern''
 +
*''Toolbar umschalten''
 +
*''Rechtschreibung prüfen''
 +
*''Umbruch''
  
*''Plugins'': Standardmäßig gibt es in der Symbolleiste des Text-Editors Buttons für
+
Sie können diese Buttons verbergen, indem Sie in der Tabelle in der entsprechenden Zeile auf den Link ''Deinstallieren'' klicken.
:*''Formel einfügen''
 
:*''Emoticon einfügen''
 
:*''Bild einfügen''
 
:*''Medien einfügen''
 
:*''Auto-Verlinkung verhindern''
 
:*''Rechtschreibung prüfen''
 
:Sie können diese Buttons verbergen, indem Sie in der Tabelle in der entsprechenden Zeile auf den Link ''Deinstallieren'' klicken.
 
*''Werkzeugleiste des Editors'': In diesem Eingabebereich können Sie eintragen, welche Buttons außerdem zur Verfügung gestellt werden. Jede Zeile entspricht einer Buttonreihe. Eine Zeile enthält eine kommagetrennte Liste der einzelnen Buttons in der Reihe.
 
*''Liste verfügbarer Zeichensätze'': In diesem Eingabebereich tragen Sie ein, welche Zeichensätze der Editor bereitstellt.
 
  
 +
====Einstellungen====
 +
*''Symbolleiste des Editors'': In diesem Eingabebereich können Sie eintragen, welche Buttons in der Symbolleiste des TinyMCE-Editors zur Verfügung gestellt werden. Jede Zeile entspricht einer Buttonreihe. Eine Zeile enthält eine kommagetrennte Liste der einzelnen Buttons in der Reihe.
 +
*''Verfügbare Zeichensätze'': In diesem Eingabebereich tragen Sie ein, welche Zeichensätze der TinyMCE-Editor bereitstellt.
 +
*''Erweiterte Einstellungen'': Hier können Sie weitere Einstellungen für den TinyMCE-Editor vornehmen. Die Einstellungen müssen im JSON-Format eingegeben werden:
 +
<pre>{"option1" : "value1", "option2" : "value2"}</pre>
 +
Alle hier gesetzten Optionen überschreiben die Standard- und Plugineinstellungen.
  
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > TinyMCE Editor > Formel einfügen'' können Sie weitere Einstellungen zum Plugin ''Formel einfügen'' vornehmen:
+
Detaillierte Informationen mit Beispielen zu den erweiterten Einstellungen finden Sie in MDL-37186 und auf der [http://www.tinymce.com/wiki.php/Configuration:formats Website von TinyMCE].
*''TeX-Filter notwendig'': Wenn diese Checkbox markiert ist und der TeX-Filter aktiviert ist, wird im Text-Editor ein DragMath-Button angezeigt.  
 
  
 +
===Formel einfügen===
 +
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Formel einfügen'' können Sie festlegen, ob der [[TeX-Notation|TeX-Filter]] im Kontext des TinyMCE-Editors verwendet werden soll. Wenn Sie diese Checkbox markieren und der TeX-Filter aktiviert ist, dann wird in der Symbolleiste des TinyMCE-Editors der DragMath-Button [[Image:dragmath.png]] zum Einfügen einer Formel angezeigt.
  
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > TinyMCE Editor > Emoticon einfügen'' können Sie weitere Einstellungen zum Plugin ''Emoticon einfügen'' vornehmen:
+
===Emoticon einfügen===
*''Emoticon-Filter notwendig'': Wenn diese Checkbox markiert ist und der Emoticon-Filter aktiviert ist, wird im Text-Editor ein Emoticon-Button angezeigt.  
+
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Emoticon einfügen'' können Sie festlegen, ob das Emoticon-Symbol [[Image:moodleemoticon.png]] in der Symbolleiste des TinyMCE-Editors verfügbar ist. Markieren Sie dazu die Checkbox ''Emoticon-Filter notwendig'' und aktivieren Sie den [[Emoticon als Bild anzeigen|Emoticon-Filter]] im Kontext des TinyMCE-Editors.
  
 +
====Systemweite HTML-Einstellungen====
 +
Administrator/innen können die Emoticons bearbeiten, die in den Texteditoren verwendet werden. Klicken Sie dazu im Block ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Darstellung > HTML-Einstellungen''.
  
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > TinyMCE Editor > Rechtschreibprüfung'' können Sie die Rechtschreibprüfung  
+
===Rechtschreibung prüfen===
 +
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Rechtschreibprüfung'' können Sie die Rechtschreibprüfung  
 
konfigurieren:
 
konfigurieren:
 
*''Rechtschreibprüfung'': Standardmäßig verwendet der TinyMCE-Editor von Moodle Google Spell als Rechtschreibprüfung.  
 
*''Rechtschreibprüfung'': Standardmäßig verwendet der TinyMCE-Editor von Moodle Google Spell als Rechtschreibprüfung.  
 
*''Liste zur Rechtschreibkontrolle'': Hier tragen Sie ein, für welche Sprachen die Rechtschreibprüfung durchgeführt werden soll.
 
*''Liste zur Rechtschreibkontrolle'': Hier tragen Sie ein, für welche Sprachen die Rechtschreibprüfung durchgeführt werden soll.
  
===Systemweite HTML-Einstellungen===
+
==Geschwindigkeit von TinyMCE in Firefox und Chrome==
Administrator/innen können die Emoticons bearbeiten, die im Text-Editor verwendet werden. Klicken Sie dazu im Block ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Darstellung > HTML-Einstellungen''.
+
Einige Nutzer/innen beklagen sich, dass der TinyMCE-Editor sehr langsam ist (siehe https://moodle.org/mod/forum/discuss.php?d=232089 und https://moodle.org/mod/forum/discuss.php?d=223125).
  
 +
Um die Geschwindigkeit zu erhöhen, können Sie alle Plugins des TinyMCE-Editors deaktivieren. Dann stehen einige Funktionen (z.B. Emoticons) nicht zur Verfügung, aber der Editor arbeitet deutlich schneller.
 
==Siehe auch==
 
==Siehe auch==
 
* [http://www.youtube.com/watch?v=xJE6UhqnyjU Video zum Text-Editor in Moodle] (englisch)  
 
* [http://www.youtube.com/watch?v=xJE6UhqnyjU Video zum Text-Editor in Moodle] (englisch)  
Zeile 125: Zeile 146:
 
[[Category:Website-Administration]]
 
[[Category:Website-Administration]]
  
[[en:Text editor]]
+
[[en:TinyMCE editor]]
 +
[[es:Editor TinyMCE]]

Version vom 22. März 2019, 09:31 Uhr

Der TinyMCE-Editor ist ein Text-Editor-Plugin. Es kann von der Moodle-Administration auf der Seite Website-Administration (oder im Block Einstellungen) > Website-Administration) > Plugins > Texteditoren > Übersicht aktiviert, deaktiviert oder als Standard-Editor gesetzt werden kann.

Nutzer/innen können in ihrem Profil den TinyMCE als bevorzugten Editor wählen (anstelle des Standard-Editors Atto): Nutzermenü > Profil > Profil bearbeiten.

Liste der Symbole

Für diejenigen, die nicht mit den Symbolen eines Textverarbeitungsprogramms vertraut sind, werden die einzelnen Symbole im folgenden nach Gruppen sortiert beschrieben.

Hinweis: Administrator/innen können die Symbolleiste anpassen - es kann also sein, dass die Symbolleiste in Ihrer Moodle-Installation ein bisschen anders aussieht.

Zeile 1

tinymcerow1.png

  • 1 - Symbolleisten ein-/ausblenden
  • 2 - Absatzformatierung
  • 3 - Fett
  • 4 - Kursiv
  • 5 - Unsortierte Liste einfügen
  • 6 - Geordnete Liste einfügen
  • 7 - Link einfügen/bearbeiten
  • 8 - Link entfernen
  • 9 - Autoverlinkung verhindern
  • 10 - Bild einfügen/bearbeiten
  • 11 - Emoticon einfügen
  • 12 - Medien einfügen
  • 13 - Eingebettete Dateien verwalten

Zeile 2

tinymcerow2.png

  • 1 - Rückgängig
  • 2 - Wiederholen
  • 3 - Unterstrichen
  • 4 - Durchgestrichen
  • 5 - Tiefgestellt
  • 6 - Hochgestellt
  • 7 - Linksbündig
  • 8 - Zentriert
  • 9 - Rechtsbündig
  • 10 - Ausrücken
  • 11 - Einrücken
  • 12 - Textfarbe
  • 13 - Hintergrundfarbe
  • 14 - Schrift von links nach rechts
  • 15 - Schrift von rechts nach links

Zeile 3

tinymcerow3.png

  • 1 - Schriftart
  • 2 - Schriftgröße
  • 3 - HTML-Code bearbeiten
  • 4 - Suchen
  • 5 - Suchen/Ersetzen
  • 6 - Geschütztes Leerzeichen einfügen
  • 7 - Sonderzeichen einfügen
  • 8 - Tabelle erstellen/bearbeiten
  • 9 - Quellcode bereinigenAls unformatierten Text einfügen
  • 10 - Formatierungen entfernen
  • 11 - Als unformatierten Text einfügen
  • 12 - Als formatierten Text einfügen
  • 13 - Vollbildschirm

Spezialeffekte

Farben

Es gibt vier verschieden Möglichkeiten für die Auswahl einer Schrift- oder Hintergrundfarbe:

  • eine 5x8 Schnellauswahlpalette und über einen Link Weitere Farben die Möglichkeit, eine Farbe über
  • Farbwahl
  • Palette oder
  • Benannte Farben

auszuwählen.

Tabelle einfügen

Tabellen werden mittel Tabellen-Symbol (8, 3.Zeile) eingefügt.

Tabellenränder sind wichtig für die Lesbarkeit einer Tabelle. Sollten sie nicht richtig angezeigt werden, fügen Sie die Ränder manuell ein:

  1. Markieren Sie alle Zellen der Tabelle.
  2. Klicken Sie die rechte Maustaste und wählen Sie im Kontextmenü den Punkt Eigenschaften der Tabelle aus.
  3. Klicken Sie auf den Reiter Erweitert.
  4. Wählen Sie einen Rahmen (z.B. alle 4 Seiten (Box)), ein Gitter (z.B. zwischen allen Zellen), eine Rahmenfarbe (z.B. schwarz).
  5. Klicken Sie auf den Button Aktualisieren.

Systemweite Einstellungen

Als Administrator/in können Sie verschiedene Einstellungen für den TinyMCE Editor vornehmen.

Grundeinstellungen

Auf der Seite Einstellungen > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Grundeinstellungen gibt es folgende Konfigurationsmöglichkeiten:

Plugins

Standardmäßig gibt es in der Symbolleiste des Text-Editors Buttons für

  • Hilfe per CTRL+Rechtsklick
  • Formel einfügen
  • Eingebettete Dateien verwalten - bietet Zugriff auf das Repository Eingebettete Dateien
  • Emoticon einfügen
  • Bild einfügen
  • Medien einfügen
  • Autoverlinkung verhindern
  • Toolbar umschalten
  • Rechtschreibung prüfen
  • Umbruch

Sie können diese Buttons verbergen, indem Sie in der Tabelle in der entsprechenden Zeile auf den Link Deinstallieren klicken.

Einstellungen

  • Symbolleiste des Editors: In diesem Eingabebereich können Sie eintragen, welche Buttons in der Symbolleiste des TinyMCE-Editors zur Verfügung gestellt werden. Jede Zeile entspricht einer Buttonreihe. Eine Zeile enthält eine kommagetrennte Liste der einzelnen Buttons in der Reihe.
  • Verfügbare Zeichensätze: In diesem Eingabebereich tragen Sie ein, welche Zeichensätze der TinyMCE-Editor bereitstellt.
  • Erweiterte Einstellungen: Hier können Sie weitere Einstellungen für den TinyMCE-Editor vornehmen. Die Einstellungen müssen im JSON-Format eingegeben werden:
{"option1" : "value1", "option2" : "value2"}

Alle hier gesetzten Optionen überschreiben die Standard- und Plugineinstellungen.

Detaillierte Informationen mit Beispielen zu den erweiterten Einstellungen finden Sie in MDL-37186 und auf der Website von TinyMCE.

Formel einfügen

Auf der Seite Einstellungen > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Formel einfügen können Sie festlegen, ob der TeX-Filter im Kontext des TinyMCE-Editors verwendet werden soll. Wenn Sie diese Checkbox markieren und der TeX-Filter aktiviert ist, dann wird in der Symbolleiste des TinyMCE-Editors der DragMath-Button dragmath.png zum Einfügen einer Formel angezeigt.

Emoticon einfügen

Auf der Seite Einstellungen > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Emoticon einfügen können Sie festlegen, ob das Emoticon-Symbol moodleemoticon.png in der Symbolleiste des TinyMCE-Editors verfügbar ist. Markieren Sie dazu die Checkbox Emoticon-Filter notwendig und aktivieren Sie den Emoticon-Filter im Kontext des TinyMCE-Editors.

Systemweite HTML-Einstellungen

Administrator/innen können die Emoticons bearbeiten, die in den Texteditoren verwendet werden. Klicken Sie dazu im Block Einstellungen > Website-Administration > Darstellung > HTML-Einstellungen.

Rechtschreibung prüfen

Auf der Seite Einstellungen > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Rechtschreibprüfung können Sie die Rechtschreibprüfung konfigurieren:

  • Rechtschreibprüfung: Standardmäßig verwendet der TinyMCE-Editor von Moodle Google Spell als Rechtschreibprüfung.
  • Liste zur Rechtschreibkontrolle: Hier tragen Sie ein, für welche Sprachen die Rechtschreibprüfung durchgeführt werden soll.

Geschwindigkeit von TinyMCE in Firefox und Chrome

Einige Nutzer/innen beklagen sich, dass der TinyMCE-Editor sehr langsam ist (siehe https://moodle.org/mod/forum/discuss.php?d=232089 und https://moodle.org/mod/forum/discuss.php?d=223125).

Um die Geschwindigkeit zu erhöhen, können Sie alle Plugins des TinyMCE-Editors deaktivieren. Dann stehen einige Funktionen (z.B. Emoticons) nicht zur Verfügung, aber der Editor arbeitet deutlich schneller.

Siehe auch