TinyMCE im Frontend

**drjochum** · 26.01.2015, 12:13

Ich hatte bisher in einer 2er-Version in einem Formular über das Modul fromrte für eine Textarea TinyMCE im Frontend eingesetzt.
Das Modul läuft in der 3er-Version nicht mehr.

Wie kann ich TinyMCE am besten im Frontend einsetzen?
Über das Template?
Oder gibt es ein Modul, das ich noch nicht kenne?

Danke, Jochum.

**Dee** · 27.01.2015, 22:05

Das würde mich auch interessieren.
Habe auch nach intensiver Suche leider keinen Anhaltspunkt gefunden.

Hat wer eine Idee?

**drjochum** · 30.01.2015, 12:07

Mit reicht ja ein Hinweis auf die Herangehensweise!

Irgendwer muss doch TinyMCE im Frontend einsetzten...

Danke!

**Dee** · 31.01.2015, 12:07

da ich im Forum nicht fündig wurde, habe ich mich ein bisschen auf http://www.tinymce.com/wiki.php/ umgeschaut. Habe aber leider noch keine passende Lösung am Start.

Ein Tipp zur Herangehensweise wäre wirklich Gold wert...

**derRenner** · 31.01.2015, 13:04

Hallo,

ist zwar nicht viel, daber vielleicht kannst du die Forum-Suche noch ein wenig ausreizen ...
@Anke konnte [formrte] mit Autoloader zum Laufen bringen

Google-Forum-Suche "formrte contao 3" ergibt unter anderem dies ...

**Dee** · 02.02.2015, 08:35

Danke für den Input @der Renner

Leider habe ich es bei meiner 3.3.7 Version nicht geschafft ihn zum laufen zu bringen.
Ich kann zwar TinyMCE beim Textarea-Feld auswählen, jedoch ist davon im Frontend nichts zu sehen.

Hat das wer im mit einer 3.3er Version im Einsatz?

**Dee** · 06.02.2015, 06:34

Von meiner Seite her muss es auch nicht zwingend mit "fromrte" sein, vielleicht hat wer von euch einen ganz anderen Ansatz um ein textarea-Feld im Frontend chic zu editieren..?

**clavis** · 14.02.2015, 07:37

Es hat ein wenig Bastelei erfordert, aber unter 3.3.3 hab ich tinyMCE mit EFG im Frontnend an den Start gebracht.

FormRTE installieren (autoload erstellen nicht vergessen)
tinyMCE legacy intallieren (https://contao.org/en/extension-list...000009.en.html)
die tinyMCE.php auf tinyWasauchimmer.php kopieren und (zumindest bei mir) folgende Änderungen vornehmen:

Zeile 24 -> languages : "de",
Zeile 33 -> language : "de",
(das vorgeschlagene <?php echo $this->language; ?> hat bei mir nicht funktioniert)

Zeile 34 -> elements : "<?php echo $this->rteFields; ?>",

Um das Textarea auch in Backend bei EFG korrekt anzuzeigen:
system/config/dcaconfig.php Ergänzen um
$GLOBALS['TL_DCA']['tl_formdata']['fields']['FELDNAME']['eval']['rte'] = 'tinyMCE';
wobei ['FELDNAME'] nicht die id, sondern der Name aus EFG ist

Und wofür ich am längsten gebraucht habe: Damit die Daten übernommen werden muss im Formular "HTML-Tags erlauben" aktiviert sein!

~~Leider funktioniert das nur für ein Feld pro Formular. Mehrere einzubinden versuche ich auch gerade recht verzweifelt.~~
Es geht doch für mehrere Felder, allerdings muss aus irgendeinem Grund offenbar mootools deaktiviert sein, da die Daten aus RTE-Textareas sonst nicht im Backend gespeichert werden.

**Dee** · 25.02.2015, 22:50

Hallo Clavis

Danke für deine Ausführliche Hilfe, ich werde es sobald als möglich versuchen und dann Bescheid geben :-) Freue mich darauf!

Beste Grüsse

**Mark Knochen** · 12.03.2015, 09:08

Mh, hat bei mir im 3.4.4 leider nicht hingehauen ... schon die Aktivierung von MooTools klappte nicht, da gab es ein paar JS-Fehler,
allerdings nutze ich hier auch gerade ein fertiges Theme ....

Habe auch versucht, über ein jQuery Plugin den TinyMCE zu laden, bislang aber auch ohne Erfolg.

Hat noch jemand einen Tipp, wie ich den TinyMCE im FE auf eine Textarea bekommen kann?

Danke

Mark

**haendersonfox** · 02.04.2015, 15:34

hallo in die runde,

also, so klappte es bei mir auf anhieb:

im seitenlayout -> javascript im HEAD-bereich folgende zeilen einfügen:

Code:

<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="assets/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea"
 });
</script>

dann im jeweiligen formular -> HTML-Tags erlauben
anklickn.

fertig…

lg.

alex

**Tina** · 22.04.2015, 09:39

Hi Alex,
das ist super und funktioniert bei mir fast!

Nur werden in der DB die HTML-Tags als Entities gespeichert.
Also wird "Test" so gespeichert: Test

Hat da jemand eine Lösung?

**bastlwastl** · 24.06.2015, 22:18

Hallo,
ich habe auch das Problem, dass in der DB die HTML-Tags als Entities gespeichert werden.
Dies hat jedoch nichts mit dem TinyMCE zu tun.
Auch ohne TinyMCE werden HTML-Tags einer Textarea als Entitie gespeichert.
Bei der Eingabe in einem Textfeld werden die HTML-Tags ganz normal gespeichert.

Kennt hierzu jemand eine Lösung?

Gruß
Bastian

**Alibi** · 10.11.2015, 13:02

Gleiche Problem auch bei mir (Textarea).
Keine html-Tags. Nur Entities.
Versuche gerade, dass Mitglieder neue News erstellen können (über das Frontend).
Klappt auch bisher soweit, eben bis auf die fehlenden html-Tags bei Textarea. Öffne ich die vom Mitglied erstellte News einmal im Backend und speichere diese ab, dann werden die html-Tags richtig erzeugt. Gibt es da mittlerweile eine Lösung (Contao 3.5.4)?

Gruß
Alibi

**Tina** · 10.11.2015, 13:37

Zitat von Alibi

Gleiche Problem auch bei mir (Textarea).
Keine html-Tags. Nur Entities.
Versuche gerade, dass Mitglieder neue News erstellen können (über das Frontend).
Klappt auch bisher soweit, eben bis auf die fehlenden html-Tags bei Textarea. Öffne ich die vom Mitglied erstellte News einmal im Backend und speichere diese ab, dann werden die html-Tags richtig erzeugt. Gibt es da mittlerweile eine Lösung (Contao 3.5.4)?

Gruß
Alibi

Ich speichere News über das Frontend über Ajax. Mittels Javascript kann man auf das TinyMCE-Feld so zugreifen:
tinyMCE.get('textarea_name').getContent({format : 'html'})
Damit bekommt man auch die HTML-Tags.

**Alibi** · 10.11.2015, 14:27

Auf die Gefahr hin, dass ich als Volltrottel darstehe: Ajax hatte ich in diesen Zusammenhang bisher gar nicht auf dem Schirm.
Kannst Du das näher erläutern? Wo baue ich welches Script ein?
- Z.Z. habe ich ein Formular (Mit Option Eingabe speichern in tl_news) mit 4 sichtbaren Feldern:
- Textfeld für die Überschrift (feldname headline)
- Textarea für den Teaser (feldname teaser)
- Textarea für den "Haupttext" (feldname newstext)
- ein Upload-Feld für ein Bild (feldname singleSRC)
- diverse hidden fields (z.B. für tstamp, pid etc.)
sowie 2 Erweiterungen: store_uuid (für die Bilder) und NewsSimple (newstext)

**Andreas** · 10.11.2015, 14:41

Für Contao ist dieses Formular-Feld nach wie vor vom Typ Textarea und erlaubt somit kein HTML im Frontend. SCRIPT, IFRAME usw. wären hier nicht so dolle. Im BE kann man diese TAGs ja sperren. Wenn ihr HTML im FE freigebt, solltet ihr auch darauf achten, dass nur bestimmte TAGs erlaubt sind. Evtl. kann man auch Markdown anbieten. Hier in diesem Forum z.B. kannst du auch kein HTML in den RTE eingeben.

**Alibi** · 11.11.2015, 06:38

Danke Andreas für Deine Tipps. Ich werde diese beherzigen.
In meinem Fall käme das Formular "nur" im geschützten Mitgliederbereich (ca. 5-10 Mitglieder) vor.
Es sollen einige Hersteller neue Produkte vorstellen können (ein Bild, ein wenig Text und evt. ein Downloadlink). Diese Hersteller möchte weder der Besitzer der Webseite noch ich aber nicht unbedingt im Backend haben.

**Andreas** · 11.11.2015, 14:16

Wäre es da nicht angebrachter ohne RTE zu arbeiten, also einfach die erforderlichen Felder zur Verfügung zu stellen? Dann wäre die Ausabe auch schön einheitlich. Also so ähnlich wie mit dem dma_elementgenerator ein neues Inhaltselement zu erstellen, nur ohne RTE-Felder. Und es wäre sicher.

**Alibi** · 13.11.2015, 13:22

Ohne RTE wäre mir auch lieber. Aber wenn es unbedingt vom Kunden gewünscht wird ...
Aber ich versuche, das soweit einzuschränken wie es geht (max. Absatz , Liste, Bold und Italic, evtl. Links). Damit eben die Ausgabe einigermaßen einheitlich bleibt.
Die Erweiterung dma_elementgenerator hatte ich auch in Betracht gezogen, aber wie gesagt, ich möchte die "Hersteller" nicht im Backend haben und versuche es deshalb, diese Nachrichen-Beiträge im geschützen Bereich im Frontend "auszulagern".

**Andreas** · 13.11.2015, 14:52

Nein, ich meinte nicht, dass du dma_elementgenerator benutzen kannst, oder sollst. Ich meinte nur so vom Prinzip her. Du hast mehrere Felder, welche den Usern als Input zur Verfügung gestellt werden. Headline, Subheadline, Fließtext (evtl. mehrere für Beschreibung, Historie, Produkte...), "wichtige Wörter" (zur Auszeichnung mit STRONG), Link, E-Mail, Bilder usw. Aus diesen Feldern kannst du dann ein schönes FE-Ausgabetemplate gestalten.

**Alibi** · 11.12.2015, 12:59

Hab es jetzt so gelöst:
Die "externen" Newsschreiber bekommen eine Zugang zu einem Formular im Frontend (Bild 1)
Nach dem Ausfüllen wird eine Email generiert. D.h. der Kunde weiß dann, das eine neue News vorliegt.
Kunde geht ins Backend, öffnet die entsprechende News (Bild 2), klickt auf "Betrag veröffentlichen" und sichern. Dann verschwinden in den entsprechenden Datenbankfeldern auch die Entities.
Und dann sehen die Ergebnisse so aus (Bild 3 und 4).
Bilder und Dateianhänge funktionieren übrigens auch. Dazu habe ich full_news so geändert. Das Bild erscheint klein beim Teaser und größer im "Volltext"
Benutzte Erweiterungen: store_uuid und simpleNews.
Als Editor für das Frondendformular habe ich jqerry TE gewählt und u.a. die Möglichkeit sourcen zu ändern deaktivert. Man kann also nicht so ohne weiteres eigenen html-code einfügen.
1 frontend Formular.jpg 2 backend News.jpg 3 teaser Frontend.jpg 4 News Frontend.jpg

Vielen Dank für die Tipps und Hinweise