TinyMCE-Editor: Unterschied zwischen den Versionen

Aus MoodleDocs
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
(33 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''.
 
[[Image:HTMLEditortoolbar.jpg]]
 


==Liste der Symbole==
==Liste der Symbole==
Zeile 12: 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 46: Zeile 81:
</gallery>
</gallery>


===Einfügen===
===Tabelle einfügen===
[[Image:imagesHTML.jpg]]
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:
#Markieren Sie alle Zellen der Tabelle.
#Klicken Sie die rechte Maustaste und wählen Sie im Kontextmenü den Punkt ''Eigenschaften der Tabelle'' aus.
#Klicken Sie auf den Reiter ''Erweitert''.
#Wählen Sie einen ''Rahmen'' (z.B. ''alle 4 Seiten (Box)''), ein ''Gitter'' (z.B. ''zwischen allen Zellen''), eine ''Rahmenfarbe'' (z.B. schwarz).
#Klicken Sie auf den Button ''Aktualisieren''.
 
==Systemweite Einstellungen==
Als Administrator/in können Sie verschiedene Einstellungen für den TinyMCE Editor vornehmen.


* 1 - Bilddatei einfügen - mit Hilfe des [[Datei-Browser]]s
===Grundeinstellungen===
* 2 - Emoticon einfügen
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Grundeinstellungen'' gibt es folgende Konfigurationsmöglichkeiten:
* 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


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


====Datei-Browser ====
Sie können diese Buttons verbergen, indem Sie in der Tabelle in der entsprechenden Zeile auf den Link ''Deinstallieren'' klicken.
[[Image:Datei_hinzufügen.jpg]]


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


====Sonderzeichen====
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].
[[Image:Sonderzeichen.jpg]]


====Tabelle====
===Formel einfügen===
<gallery widths="300px">
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.  
Image:Tabelle_allgemein.jpg|Allgemein
Image:Tabelle_erweiter.jpg|Erweitert
</gallery>


==Systemweite Einstellungen==
===Emoticon einfügen===
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.


===Texteditoren verwalten===
====Systemweite HTML-Einstellungen====
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''.
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''.
Standardmäßig ist der TinyMCE Editor aktiviert.


====TinyMCE Editor====
===Rechtschreibung prüfen===
Als Administrator/in können Sie auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > TinyMCE Editor'' folgende Einstellungen vornehmen:
Auf der Seite ''[[Einstellungen-Block|Einstellungen]] > Website-Administration > Plugins > Texteditoren > Texteditor TinyMCE > Rechtschreibprüfung'' können Sie die Rechtschreibprüfung
*''Rechtschreibprüfung'': Der TinyMCE-Editor von Moodle verwendet Google Spell als Standardrechtschreibprü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.
*''Liste zur Rechtschreibkontrolle'': Hier tragen Sie ein, für welche Sprachen die Rechtschreibprüfung durchgeführt werden soll.
*''Liste verfügbarer Zeichensätze'': Hier können Sie zusätzliche Zeichensätze angeben, die Moodle verwenden soll. Siehe Screencast [http://youtu.be/udP7Bnur30Y How to add extra fonts]


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