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

TinyMCE-Editor: Unterschied zwischen den Versionen

Aus MoodleDocs
Wechseln zu:Navigation, Suche
K (Ghillenb verschob die Seite Text-Editor nach TinyMCE-Editor)
Keine Bearbeitungszusammenfassung
 
(21 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Text editieren}}
{{Text editieren}}


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.
Der [[TinyMCE-Editor]] ist ein Text-Editor-Plugin. Es kann von der Moodle-Administration auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > Übersicht'' aktiviert, deaktiviert oder als Standard-Editor gesetzt werden kann.


==Symbolleisten ein- und ausblenden==
Nutzer/innen können in ihrem Profil den TinyMCE als bevorzugten Editor wählen (anstelle des Standard-Editors  [[Text-Editor|Atto]]): ''[[Einstellungen-Block|Einstellungen]] > Mein Profil > Profil bearbeiten''.
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 18: Zeile 11:


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 52: Zeile 82:
</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
* 2 - Emoticon einfügen
* 3 - Multimedia einfügen - mit Hilfe des [[Datei-Browser]]s
* 4 - Formel - mit Hilfe des JavaScript-Editors
* 5 - geschütztes Leerzeichen einfügen
* 6 - Sonderzeichen einfügen
* 7 - Tabelle einfügen


 
Tabellenränder sind wichtig für die Lesbarkeit einer Tabelle. Sollten sie nicht richtig angezeigt werden, fügen Sie die Ränder manuell ein:
====Datei-Browser ====
#Markieren Sie alle Zellen der Tabelle.
[[Image:Datei_hinzufügen.jpg]]
#Klicken Sie die rechte Maustaste und wählen Sie im Kontextmenü den Punkt ''Eigenschaften der Tabelle'' aus.
 
#Klicken Sie auf den Reiter ''Erweitert''.
====Formel-Editor====
#Wählen Sie einen ''Rahmen'' (z.B. ''alle 4 Seiten (Box)''), ein ''Gitter'' (z.B. ''zwischen allen Zellen''), eine ''Rahmenfarbe'' (z.B. schwarz).
[[Image:Formeleditor.jpg]]
#Klicken Sie auf den Button ''Aktualisieren''.
 
====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)  

Aktuelle Version vom 20. August 2014, 15:05 Uhr


Der TinyMCE-Editor ist ein Text-Editor-Plugin. Es kann von der Moodle-Administration auf der Seite 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): Einstellungen > Mein 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