[gelöst] Text-Fluss um Bild innerhalb eines Text-Body funktioniert nicht (CKEditor)

Wenn du Css kannst, kannst du ja mal das betreffende Element mit den Entwicklerwerkzeugen deines Browsers untersuchen und dir das zugehörige Css prüfen. Eventuell ist im verwendeten Theme ein Fehler.

Da du mit Drupal angefangen hast, gehe ich davon aus, dass du Css und HTML beherrscht. Sollte dem nicht so sein würde ich dir empfehlen, an dieser Stelle deine Kenntnisse aufzufrischen.

Meine Kenntnisse in CSS & HTML sind Zero/Zero.
Maximal kann ich etwas mit Anleitung in einen Code "rein-pfuschen".

- Gibt es für den Einstieg in CSS & HTML etwas Empfehlenswerte für Nicht-Softwareker (insofern das hier geposted werden darf)?

- Weiß ggf. jemand welches Textbox-Tool hier im Drupal-Center eingesetzt wird (Drupal-Core oder ein separates Modul)?

Viele Grüße
Tom

Gibt es zu der Seite einen URL?

Hey Tom,,

ich gehe mal davon auß, dass du mit Textbox-Tool den WYSIWYG-Editor meinst, der das Textfeld in einen Texteditor verwandelt. Das dürfte Buiubu-Editor sein. Der ist meines Wissens nach aber nur für Drupal 7 verfügbar und nicht für Drupal 8.

Sollte die Seite irgendwo online sein, kannst du hier ja mal einen Link posten. ansosnten würde ein Screenshot, der Zeigt, wo genau das Problem,, das du zu lösen versuchst, liegt. Vielleicht können wir dann erkennen, wie wir dir unkompliziert helfen könnnen.

Grundsätzlich muss das Theme die CSS-Stile enthalten, die auch im CK-Editor verwendet werden, damit das im Forntent genau so aussiet wie im Backend. Dass geht so:

https://www.drupalthemer.org/blog/drupal-8-how-to-ckeditor-custom-styles

wahrscheinlich liegt es an den rechten mit Full HTML. das haben deine user anscheinend nicht

Hallo zusammen,

sorry für die späte Rückmeldung und Bereitstellung von Screenshots.
Der Text-Editor kommt auf der Website an verschiedenen Stellen vor.

Screenshot 1 (log in als "normaler" user):
Im ersten Screenshot (Text-Fluss_1) wird der Text rechts neben dem Bild (Backend) im Front-End unterhalb
des Bildes angezeigt --> Warum?
Ich dachte erst es liegt ggf. am responsive-design jedoch wird die erste Zeile
ja auch in voller Breite im Frontend richtig dargestellt.
Hier geht wenigstens kein Text verloren.

Screenshot 2 (log in als normaler user):
Hier werden nur die ersten beiden Zeilen neben dem Bild im Frontend wiedergegeben.
Der übrige Text aus dem Backend geht im Frontend verloren bzw. wird nicht angezeigt --> Warum?

Screenshot 3:
Zeigt den Text-Editor wenn als Admin angemeldet.
Hier gibt es scheinbar mehr Möglichkeiten als für "normale" user.

In der Vergangenheit meine ich konnte man auf meiner Website beim Editor sogar noch wählen, ob es
Full HMTL, HTML xy, oder nur Plain-Text sein sollte. Das ist aktuell nicht mehr möglich.
Zur Info: Ich arbeite bei dieser Website mit indischen Entwicklern zusammen. Die zieren sich bei diesem Thema aber gerade...

Viele Grüße
Tom

Oh Tom dich hab ich ja komplett vergessen. Sorry.

Du musst einfach nur die Textformate unter Konfiguration Textformate und -editoren konfigurieren, dann geht das auch für User mit weniger Rechten.

Hallo Dinmikkith,

danke für den Tipp mit den Textformaten. Damit bin ich einen Schritt weiter.
Leider funktioniert das mit dem Textfluss um Bilder immer noch nicht stabil.
Ich habe mir die Text-Formate mal angeschaut:

- Die Text-Felder sind als Basic-HTML formatiert --> Settings siehe Bild im Anhang
-> Was muss in den Settings Eingestellt werden, damit der Text-Fluss um Bilder im Front-End funktioniert?

- Ich habe noch einige Funktionen im CKEditor aktiviert -> Leider werden die Optionen Text links & rechts-bündig, zentriert und Block nicht im "Front-End" zum Text-Formatieren während der Eingabe angezeigt obwohl diese aktiviert wurden (warum?) -> damit wird der Textfluss im Front-End immer noch falsch angezeigt wie eh und je
-> Was muss ich hier ggf. eingestellt werden damit auch Text-Bündigkeit, etc. funktioniert?

Ich habe auch die Funktion "Tabelle" im CKEditor aktiviert, um damit den Text und die Bilder besser zu strukturieren
-> Bilder und Text sind dann jeweils in eigenen Zellen -> Siehe Anhang
-> Das wird im Front-End auch richtig dargestellt
-> Aber, sobald ich erneut in das Backend wechsle um Anpassungen vor zu nehmen ist die Tabelle halb zerschossen
-> Bilder werden in anderer Größe dargestellt
-> Zellen verlieren ihre vorherige Breite (z.B. als Space eingesetzt)
-> Zellen-Einstellungen wie "Text oder Bild in der Zelle links-bündig und oben" gehen verloren -> alle Einstellungen sind wieder auf Default

In Summe macht mir der CKEditor einen sehr instabilen Eindruck.
In Erklär-Videos zum CKEditor sieht alles stabil und komfortable aus.
Ich denke nicht, dass es am viel verwendeten CKEditor selbst liegt...
Was ist hier ggf. bzgl. CKEditor grundsätzlich falsch eingestellt?

Viele Grüße
Tom

Hallo zusammen,

hier noch ein Screenshot vom HTML-Scan im Anhang.
Blau-hinterlegt ist das eingefügte Bild welches links angeheftet ist und der Text entsprechend rechts darum fließen soll.
In Gelb sind die Textstellen markiert, die eigentlich gemäß CKEditor rechts vom Bild stehen sollten; im Frontend aber einfach darunter geschoben werden.

- Liegt es ggf. an der Art wie das Bild mittels HTML-Tag "formatiert" ist?

- Fehlt ggf. ein HTML-Tag in der White-List der Basic-HTML (siehe Anhang und Bilder vorheriger Post vom 15.06.2020)?

- Müsste im HTML-Code für den Text der das Bild umfließt nicht ein "span-Element" stehen.. und wenn ja warum fehlt es (span ist in der White-List enthalten)..?

Viele Grüße
Tom

mache doch einfach mal alle filter aus. dann klappt das auch! sieh oben. deine nutzer haben die falsche einstellung/keine rechte!

Mir ist nicht klar, welche Filter hier gemeint sind und wo/wie ich die ausschalten soll.

Bei den User-Permissions habe ich allen Usern die Filter-Rechte für Full HTML gegeben (siehe Bild im Anhang).
Das hat aber keinen Einfluss auf die Darstellung im Frontend.
Der Text fließt immer noch nicht um das Bild wie im Backend definiert - auch im Falle von Administrator (Inhaber alle Rechte)

Viele Grüße
Tom

alle rechte sind falsch! drupal nimmt immer die wenigsten...
wenn du einem nutzer z.B. basic gibst, kann man nicht zusätzlich mehr rechte vergeben!!
das ist nicht additiv!

Danke für den Hinweis wie die Rechte von Drupal interpretiert werden!!
Ich habe die Rechte bei den Nutzern entsprechend reduziert.
Ich habe es einmal mit nur Full-HTML oder nur Restricted HTML (Beispiel im Anhang) probiert.

Allerdings ist bei Administrator immer alles aktiviert und kann auch nicht deaktiviert werden.
Ich habe die Website im Inkognito-Browserfenster neu geladen.
-> Der Text fließt im Frontend immer noch nicht um das Bild sowie im Backend definiert. Problem besteht weiter.

Viele Grüße
Tom

wei ich schon geschrieben habe: einmal restrictet vergeben, werden nicht mehr Rechte dazu addiert!!
Eins von beiden, du mußt dich entscheiden!
der admin ist eine ausnahme!
und restricted hat ja auch nicht die rechte! dann musst du entwder denen full html geben oder den level restricted anpassen!!!

Ich denke ich habe es so getestet wie vorgeschlagen - jeweils nur eine HTML-Variante zur selben Zeit aktiviert
Ggf. habe ich es nicht gut beschrieben.

Ich habe 2 Tests mit den HTML-User-Permissions durchgeführt:
1. Test: Nur Full-HTML bei den Usern aktiviert, alle anderen HTML-Varianten deaktiviert -> Text fließt im Frontend nicht um das Bild

2. Test: Nur Restricted HTML bei den Usern aktiviert, alle anderen HTML-Varianten deaktiviert (davon war der Screenshot). Im Restricted-Level sind mehrere HTML-Tags in der White-Liste aufgeführt. Zudem sind die entsprechenden Buttons vom CKEditor dort auch aktiviert. Es war einfach nur ein Test, ob sich was ändert -> Text fließt im Frontend aber auch nicht um das Bild

Mit Full HTML sollte es ja gehen... tut es aber irgendwie nicht ...

Was ist mit "einmal Rechte vergeben lassen sich nicht mehr Rechte dazu addieren"? Muss ich ggf. irgendetwas grundsätzlich resetten, reicht ein bloßes deaktivieren und aktivieren (also nur einen) der HTML-Filter ggf. nicht aus, um eine Veränderung herbeizuführen?

Hier wurde auch einmal darauf verwiesen, dass erst noch entsprechende CSS Classes erstellt und "eingebunden" werden müssen..
Das übersteigt aber aktuell meine Kenntnisse.

Blockiert ggf. das Responsive-Design den Textfluss im Frontend?

Viele Grüße
Tom

Am Ende habe ich eine Tabelle innerhalb des Editors erstellt. Bild in die Tabelle geladen und den Textfluss so um das Bild/Tabelle geleitet.