TYPO3 Flow: Multiple Bootstrap-Wysiwyg-Editor mit Fluid

TYPO3 Flow: Multiple Bootstrap-Wysiwyg-Editor mit Fluid

Posted by ariesprodesign in PHP, Programmierung, Typo3 Flow, TYPO3 Neos, Webdesign 25 Jan 2015

Wie der Titel schon verrät, wollen wir heute mehrere Bootstrap-wysiwyg-editor auf eine Seite platzieren. Wir nehmen dafür dieses Editor hier: http://mindmup.github.io/bootstrap-wysiwyg/

Wenn Sie das ohne dieser Anleitung versuchen werden Sie auf zwei Probleme stoßen.

Erstens: Sie werden keine <textarea> finden, somit geht das versenden der Daten nur mit AJAX (Das wollen wir aber nicht).

Zweitens: Wenn Sie zwei Editoren verwenden und Sie das Italic Format auf eine der Editoren auswählen, wird diese Auswahl bei allen Editoren gelten. Um das zu verhindern muss jeder Editor eine anderen „toolbarSelector“ zugewiesen bekommen.

Fangen wir mit den Dateien an, die wir anbinden müssen. Anbinden müssen wir folgende Dateien (Falls noch nicht angebunden):

Uns fehlen noch einige CSS Anpassungen, dazu machen wir eine neue CSS-Datei und die speichern wir unter My/Package/Resources/Public/Styles/index.css

Dann müssen wir folgende Dateien runterladen und in My/Package/Resources/Public/JavaScript speichern:

bootstrap-wysiwyg.js

und

jquery.hotkeys.js

Als nächstes müssen wir drei Partials erstellen:

Der erste dient als Toolbar:

Der zweite ist unser eigentlicher Editor:

Und der Dritte wird nur ein Mal pro Seite instanziiert.

Jetzt erstellen wir unser Formular mit zwei Bootstrap-Wysiwyg Textfelder.

Wysiwig-Editor

Um das alles zu testen erstellen wir die Update Action in Controller:

Und die Update Template. Hier ist ganz wichtig mit dem Fluid <f:format.htmlentitiesDecode> View Helper zu arbeiten, damit wir die HTML Ausgabe bekommen

Dann bekommen wir folgendes zu sehen:
Wysiwig-Ausgabe

  • Atornille la empaquetadora März 19, 2018 at 1:32 pm / Antworten

    I’m so happy to read this. This is the kind of manual that needs to be given and not the random misinformation that is at the other blogs. Appreciate your sharing this best doc.

Schreiben Sie einen Kommentar