Action Text mit Trix – Rich-Text-Editor mit dem b4um Generator

Mit dem b4um Generator lässt sich eine bestehende Rails-Ressource nachträglich um Action Text mit Trix erweitern.

Dabei wird nicht nur der normale Trix-Editor eingebunden. Der b4um Generator ergänzt ihn unter anderem um Überschriften, Textausrichtung, Farben, Container, Bildergalerien und eine Lightbox.

In diesem Tutorial verwenden wir eine einfache Post-Ressource und erweitern das Feld content zu einem Rich-Text-Feld.

1. Ausgangspunkt

Für dieses Beispiel existiert bereits eine Ressource Post mit den Feldern:

title
content

Sie kann beispielsweise mit dem b4um Scaffold erzeugt worden sein:

bin/rails generate b4um:scaffold Post title:string content:text
bin/rails db:migrate

Anschließend steht die normale CRUD-Oberfläche für Posts zur Verfügung.

Das Feld content ist zu diesem Zeitpunkt noch ein gewöhnliches Textfeld.

Die Form enthält beispielsweise:

<div class="form-field form-field--textarea">
  <%= form.text_area :content,
        class: "form-textarea",
        placeholder: " " %>
  <%= form.label :content, class: "form-label" %>
</div>

Auch das Modell enthält noch keine Action-Text-Verknüpfung:

class Post < ApplicationRecord
end

2. Trix-Generator aufrufen

Jetzt wird content mit dem b4um Trix-Generator erweitert:

bin/rails generate b4um:trix Post content

Die Syntax lautet allgemein:

bin/rails generate b4um:trix MODEL ATTRIBUTE

Der Generator erwartet also:

MODEL      vorhandenes Rails-Modell
ATTRIBUTE  vorhandenes Feld, das Rich Text verwenden soll

In unserem Beispiel:

Post
content

3. Was der Generator installiert

Falls Action Text in der Anwendung noch nicht vorhanden ist, führt der Generator automatisch die notwendige Installation aus.

Bei unserem Test erschien unter anderem:

rails  action_text:install

Rails erzeugte daraufhin die notwendigen Action-Text-Dateien und Migrationen.

Der b4um Generator ergänzte außerdem unter anderem:

create  app/javascript/b4um/trix.js
create  app/helpers/b4um_rich_text_helper.rb
insert  app/models/post.rb
gsub    app/views/posts/_form.html.erb
gsub    app/views/posts/_post.html.erb
create  config/initializers/action_text.rb

Zusätzlich werden die notwendigen JavaScript- und Importmap-Einträge vorgenommen.

Der Generator verändert damit gezielt die bereits vorhandene Ressource.

4. Datenbankmigration ausführen

Nach der erstmaligen Action-Text-Installation muss die erzeugte Migration ausgeführt werden:

bin/rails db:migrate

Action Text speichert den Rich-Text-Inhalt nicht einfach als normalen String in der bestehenden Tabelle.

Stattdessen verwendet Rails die Action-Text-Infrastruktur und verknüpft den Inhalt mit dem jeweiligen Datensatz.

5. Modell kontrollieren

Der Generator ergänzt das Modell automatisch.

app/models/post.rb enthält anschließend:

class Post < ApplicationRecord
  has_rich_text :content
end

Damit wird content zu einem Action-Text-Attribut.

6. Formular kontrollieren

Auch das bestehende Formular wird angepasst.

Aus:

<%= form.text_area :content,
      class: "form-textarea",
      placeholder: " " %>

wird:

<div class="form-field form-field--rich-text">
  <%= form.rich_text_area :content,
        class: "form-textarea",
        placeholder: " " %>
  <%= form.label :content, class: "form-label" %>
</div>

Das übrige Scaffold-Formular bleibt bestehen.

Der Generator ersetzt also gezielt das ausgewählte Feld und baut nicht das komplette Formular neu.

7. Den Editor im Browser öffnen

Rails starten:

bin/dev

Anschließend beispielsweise aufrufen:

http://localhost:3000/posts/new

Jetzt erscheint anstelle des normalen Textfeldes der erweiterte Trix-Editor.

Auf unserem Testbild sieht man bereits zusätzliche Werkzeuge neben den klassischen Trix-Funktionen.

8. Einen ersten Rich-Text-Beitrag anlegen

Als Titel verwenden wir beispielsweise:

Mein erster Rich-Text-Beitrag

Als ersten Inhalt:

Willkommen bei b4um

Darunter kann normaler Fließtext ergänzt werden:

Mit dem b4um Generator lässt sich Action Text mit Trix in eine bestehende Ressource integrieren.

Damit können wir die verschiedenen Formatierungen testen.

9. Überschriften H1 bis H6

Der b4um Trix-Editor erweitert die Werkzeugleiste um Überschriften von H1 bis H6.

Text markieren und das Überschriftenmenü öffnen.

Zur Verfügung stehen:

H1
H2
H3
H4
H5
H6

Für unser Beispiel markieren wir:

Willkommen bei b4um

und wählen H1.

10. Klassische Textformatierungen

Die normalen Rich-Text-Funktionen stehen ebenfalls zur Verfügung.

Dazu gehören beispielsweise:

Fett
Kursiv
Durchgestrichen
Links
Zitate
Listen
Einrückungen

Formatierungen können dabei auch nur auf einen Teil eines Absatzes angewendet werden.

Das haben wir später beim Editieren eines bestehenden Beitrags getestet: Innerhalb eines normalen Absatzes blieben Fett- und Kursivformatierungen nach dem Speichern erhalten.

11. Textausrichtung

Der erweiterte Editor unterstützt außerdem unterschiedliche Textausrichtungen.

Zur Verfügung stehen:

links
zentriert
rechts

Dadurch können einzelne Absätze unabhängig voneinander ausgerichtet werden.

Auch diese Formatierung bleibt nach dem Speichern und erneuten Bearbeiten erhalten.

12. Text- und Hintergrundfarben

Über das Farbwerkzeug lassen sich Textfarbe und Hintergrundfarbe verändern.

Im Test haben wir die Wörter:

Action Text mit Trix

formatiert.

Dabei wurde eine Textfarbe sowie ein gelber Hintergrund verwendet.

Sobald die Textauswahl aufgehoben wird, sieht man die tatsächliche Formatierung deutlich.

Damit lässt sich unmittelbar kontrollieren, ob die gewählte Hintergrundfarbe tatsächlich angewendet wurde.

13. DIV-, SECTION- und ARTICLE-Container

Eine Besonderheit des b4um Trix-Editors sind editierbare HTML-Container.

In der Werkzeugleiste befinden sich:

div
section
article

Damit lässt sich ausgewählter Inhalt in einen entsprechenden Container einschließen.

Das ist beispielsweise praktisch, wenn bestimmte Inhaltsbereiche später gezielt per CSS oder JavaScript angesprochen werden sollen.

14. Eine ID für einen Container vergeben

Beim Erstellen eines Containers fragt der Editor nach einer ID.

In unserem Test wurde für eine Section beispielsweise eingegeben:

ich_bin_eine_section

Der Inhalt wird anschließend in einer Section gespeichert.

Vereinfacht entspricht das:

<section id="ich_bin_eine_section">
  ...
</section>

Die Container bleiben dabei im Editor weiter bearbeitbar.

Ein aktiver Container kann über den entsprechenden Button auch wieder entfernt werden.

15. Container in der Browserkonsole kontrollieren

Wir können direkt im Browser prüfen, ob die Section tatsächlich im ausgegebenen HTML vorhanden ist.

Dazu die Entwicklerwerkzeuge öffnen und auf Konsole wechseln.

Dann eingeben:

document.querySelector("#ich_bin_eine_section")

In unserem Test lieferte der Browser:

<section id="ich_bin_eine_section">…</section>

16. Das vollständige HTML des Containers prüfen

Noch genauer können wir mit outerHTML nachsehen:

document.querySelector("#ich_bin_eine_section").outerHTML

Die Konsole zeigte bei unserem Test unter anderem:

<section id="ich_bin_eine_section">
  Mit dem b4um Generator lässt sich
  <span style="background-color:rgb(250, 247, 133);color:rgb(207, 0, 0);">
    Action Text mit Trix
  </span>
  in eine bestehende Ressource integrieren.
</section>

Die ID ist nicht nur im Editor vorhanden, sondern die Section befindet sich tatsächlich im erzeugten DOM.

Damit konnten wir gleichzeitig mehrere Dinge nachweisen:

<section> wurde gespeichert,
die ID wurde gespeichert,
die Textfarbe wurde gespeichert,
die Hintergrundfarbe wurde gespeichert,
der eigentliche Inhalt befindet sich weiterhin im Container.

Das ist ein sehr hilfreicher Test, wenn man kontrollieren möchte, was Trix tatsächlich im HTML erzeugt.

17. Bilder in Rich Text einfügen

Über die Attachment-Funktion von Trix können Bilder direkt in den Beitrag eingefügt werden.

In unserem Test wurden drei Bilder eingefügt und jeweils beschriftet:

iMac
MacBook Pro
MacBook

Die Bilder werden responsiv innerhalb des Rich-Text-Inhalts dargestellt.

Mehrere Bilder können dabei als Galerie erscheinen.

Das Layout passt sich der verfügbaren Breite an.

18. Bilder in der Lightbox öffnen

Bilder innerhalb des Rich-Text-Inhalts sind mit der b4um Image-Lightbox verbunden.

Ein Klick auf eines der Bilder öffnet die Galerie bildschirmfüllend.

Unsere Galerie enthielt drei Bilder.

Die Lightbox zeigte deshalb beispielsweise:

3 von 3

Zusätzlich stehen zur Verfügung:

vorheriges Bild,
nächstes Bild,
Schließen,
Bildbeschriftung,
Tastaturnavigation,
Maus- und Touch-Swipe.

Damit verhalten sich Rich-Text-Bilder genauso komfortabel wie die anderen vom b4um Generator unterstützten Bildergalerien.

19. Videos einfügen

Auch Videos können als Attachment in den Rich-Text-Inhalt aufgenommen werden.

Im Editor erscheint ein Video zunächst als Attachment.

Bei unserem Test beispielsweise:

1.mp4 12.35 MB

Beim Bearbeiten sieht das bewusst anders aus als die spätere Ausgabe.

Auf der fertigen Show-Seite wird das Video dagegen als abspielbares Video ausgegeben.

Der Browser stellt die üblichen Bedienelemente zur Verfügung:

Play/Pause,
Zeitposition,
Lautstärke,
Vollbild,
weitere Browserfunktionen.

Damit können Bilder, Text und Video gemeinsam innerhalb eines Rich-Text-Beitrags verwendet werden.

20. Ausgabe auf der Show-Seite

Die normale Ressource wurde vom Generator ebenfalls angepasst.

Für die vollständige Ausgabe wird der Action-Text-Inhalt gerendert.

Gleichzeitig integriert der Generator die Image-Lightbox für darin enthaltene Bilder.

Dadurch bleiben die Rich-Text-Formatierungen in der Ausgabe erhalten.

In unserem Test waren unter anderem sichtbar:

H1-Überschrift,
Fließtext,
Listen,
Zitat,
farbiger Text,
gelber Hintergrund,
Bildergalerie,
Bildbeschriftungen,
Video,
Fett- und Kursivschrift,
unterschiedliche Textausrichtungen.

21. Kompakte Vorschau im Bento-Layout

Eine Besonderheit gibt es für die kompakte Darstellung eines Datensatzes.

Dort soll nicht das komplette Rich-Text-Dokument einschließlich HTML ausgegeben werden.

Der Generator verwendet deshalb:

<%= b4um_rich_text_preview(post.content, length: 160) %>

statt eines einfachen:

truncate(post.content, length: 160)

Dafür erzeugt der Generator:

app/helpers/b4um_rich_text_helper.rb

Der Helper erzeugt eine kompakte Vorschau des Rich-Text-Inhalts.

Dabei wird Rich Text für die Kartenansicht sinnvoll aufbereitet, während auf der Show-Seite der vollständige Inhalt erhalten bleibt.

Das ist insbesondere für das responsive Bento-System wichtig.

22. Bestehenden Beitrag erneut bearbeiten

Ein wichtiger Test ist das erneute Öffnen eines bereits gespeicherten Rich-Text-Beitrags.

Dazu:

Posts → Beitrag → Edit

Unser umfangreicher Testbeitrag wurde vollständig wieder in den Editor geladen.

Vorhanden waren weiterhin:

Text,
Formatierungen,
Bilder,
Bildbeschriftungen,
Video,
Absätze,
Ausrichtungen.

Anschließend haben wir den vorhandenen Inhalt tatsächlich verändert.

Wir ergänzten weitere Absätze und verwendeten innerhalb eines Absatzes Fett- und Kursivschrift.

Danach:

Update Post

23. Änderungen nach dem Update kontrollieren

Nach dem Update wurde die Show-Seite erneut geöffnet.

Der Test bestätigte:

die neuen Absätze wurden gespeichert,
Fettformatierung blieb erhalten,
Kursivformatierung blieb erhalten,
die Textausrichtung blieb erhalten,
das Video blieb vorhanden,
die Bilder blieben vorhanden,
die übrigen Rich-Text-Inhalte wurden nicht beschädigt.

Damit haben wir nicht nur das erstmalige Erstellen getestet, sondern einen vollständigen Bearbeitungszyklus:

Create
  ↓
Save
  ↓
Show
  ↓
Edit
  ↓
Update
  ↓
Show

24. Was b4um:trix automatisch übernimmt

Der Generator:

bin/rails generate b4um:trix Post content

übernimmt einen großen Teil der Integration automatisch.

Dazu gehören unter anderem:

Action Text installieren
Trix einrichten
has_rich_text ergänzen
Formularfeld ersetzen
Rich-Text-Ausgabe anpassen
Preview-Helper installieren
b4um Trix JavaScript installieren
Image-Lightbox integrieren
Action-Text-Konfiguration ergänzen

Der bestehende Scaffold muss dafür nicht neu erzeugt werden.

25. Unterstützte Funktionen

Die getestete b4um Trix-Integration unterstützt unter anderem:

Text

Fett
Kursiv
Durchgestrichen
Links
Zitate
Listen
Einrückungen

Erweiterte Formatierung

H1 bis H6
Linksbündig
Zentriert
Rechtsbündig
Textfarben
Hintergrundfarben
Horizontale Linien

HTML-Container

DIV
SECTION
ARTICLE
IDs

Medien

Bilder
mehrere Bilder
Bildbeschriftungen
responsive Galerien
Image-Lightbox
Video

Lightbox

Vorheriges Bild
Nächstes Bild
Bildzähler
Bildbeschriftung
Tastaturnavigation
Maus-/Touch-Swipe

26. Generator erneut ausführen

Der b4um Trix-Generator ist auf sichere wiederholte Ausführung ausgelegt.

Der gleiche Befehl kann deshalb erneut ausgeführt werden:

bin/rails generate b4um:trix Post content

Bereits vorhandene Integrationsteile sollen dabei nicht unnötig dupliziert werden.

Das ist besonders hilfreich, wenn ein Projekt später weiterentwickelt wird.

27. Hilfe zum Generator

Eine Übersicht aller b4um Generatoren erhält man mit:

bin/rails generate b4um:help

Dort befindet sich auch der Abschnitt:

TRIX / RICH TEXT

mit der grundlegenden Syntax:

bin/rails generate b4um:trix MODEL ATTRIBUTE

Beispiel:

bin/rails generate b4um:trix Article content

Fazit

Mit:

bin/rails generate b4um:trix Post content

kann eine bereits bestehende b4um Ressource nachträglich zu einem umfangreichen Rich-Text-System erweitert werden.

Dabei bleibt es nicht beim Standard-Trix-Editor.

Die b4um Integration verbindet Action Text und Trix mit zusätzlichen Funktionen wie H1–H6, Ausrichtungen, Farben, editierbaren HTML-Containern, IDs, responsiven Bildergalerien, Lightbox und Medien-Anhängen.

Besonders praktisch ist, dass der Generator gleichzeitig die bestehende Form, das Modell, die Ausgabe und die kompakte Bento-Vorschau anpasst.

Unser Test hat dabei den kompletten Lebenszyklus durchlaufen:

Scaffold
→ Trix installieren
→ Rich Text erstellen
→ formatieren
→ Container mit ID anlegen
→ HTML im Browser kontrollieren
→ Bilder einfügen
→ Lightbox testen
→ Video einfügen
→ speichern
→ erneut bearbeiten
→ aktualisieren
→ Ausgabe kontrollieren

Damit ist die Trix-Integration nicht nur installiert, sondern auch vollständig praktisch getestet.

Meld dich an und schreibe ein Kommentar