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
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(44 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. 
 
[[Image:HTMLEditortoolbar.jpg]]


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


==Liste der Symbole==
==Liste der Symbole==
Zeile 12: 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 40: Zeile 76:


<gallery>
<gallery>
Image:HTML_editor_color_selector_basic_1.png|5x8 Schnellauswahlpalette
Image:color1.png|5x8 Schnellauswahlpalette
Image:HTML_editor_color_selector_more_picker_1.png|Regenbogen-''Farbwahl''
Image:color2.png|Regenbogen-''Farbwahl''
Image:HTML_editor_color_selector_more_pallet_1.png|''Palette'' mit 18x12 Farben
Image:color3.png|''Palette'' mit 18x12 Farben
Image:HTML_editor_color_selector_more_named_1.png|''Benannte Farben'' - Eingabe der Farbcodierung
Image:color4.png|''Benannte Farben'' - Eingabe der Farbcodierung
</gallery>
</gallery>


===Einfügen===
===Tabelle einfügen===
[[Image:HTML_editor_group_insert_MU_1.png]]
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


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


====Datei-Browser ====
===Grundeinstellungen===
[[Image:Datei-Browser.jpg]]
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Grundeinstellungen'' gibt es folgende Konfigurationsmöglichkeiten:


====Formel-Editor====
====Plugins====
[[Image:Formeleditor.jpg]]
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''


====Sonderzeichen====
Sie können diese Buttons verbergen, indem Sie in der Tabelle in der entsprechenden Zeile auf den Link ''Deinstallieren'' klicken.
[[Image:Sonderzeichen.jpg]]


====Tabelle====
====Einstellungen====
<gallery widths="300px">
*''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.
Image:Tabelle_allgemein.jpg|Allgemein
*''Verfügbare Zeichensätze'': In diesem Eingabebereich tragen Sie ein, welche Zeichensätze der TinyMCE-Editor bereitstellt.
Image:Tabelle_erweitert.jpg|Erweitert
*''Erweiterte Einstellungen'': Hier können Sie weitere Einstellungen für den TinyMCE-Editor vornehmen. Die Einstellungen müssen im JSON-Format eingegeben werden:
</gallery>
<pre>{"option1" : "value1", "option2" : "value2"}</pre>
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 [http://www.tinymce.com/wiki.php/Configuration:formats Website von TinyMCE].


==Systemweite Einstellungen==
===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.


===Texteditoren verwalten===
===Emoticon einfügen===
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 > 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.
Standardmäßig ist der TinyMCE-editor aktiviert.


====Rechtschreibprüfung====
====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''.


Der TinyMCE-Editor von Moodle verwendet Google Spell als Standardrechtschreibprüfung. Adminstrator/innen können diese Einstellung auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > TinyMCE Editor'' ändern.
===Rechtschreibung prüfen===
Auf der Seite ''[[Einstellungen-Block|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.


===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