Buttons schwer zu treffen

[Bernhard_4711]

Ich setze die Version von github in der Version vom 07.03.2023 ein und ich habe folgendes Problem:

Wenn ich den Editor aufrufe und dort etwas machen möchte, muß ich einen Button (egal, welchen!) ganz exakt am unteren Rand *) treffen, sonst wird der Editor ohne jede Änderung geschlossen und ich sehe den vorherigen Text.

*) Ich meine den Bereich des Buttons, wenn ich die Maus von unten auf den gewünschten Button zu bewege und just der Erklärungstext erscheint. Jeder andere Bereich des Buttons ist wirkungslos.

Ich hoffe, ich konnte mich verständlich ausdrücken?

[homtata]

In meiner Version (heute 20.04. runtergeladen aus GIT) habe ich das Problem mit TinyMCE4 nicht. Da funktionieren alle Button vollflächig wie gehabt.

[Bernhard_4711]

Dann versuche ich diese Version auch mal; danke.

[Bernhard_4711]

Mea culpa, mea maxima culpa!

Es liegt am Firefox! Mit Edge unter Windows und mit Chromium unter Xubuntu läuft der Editor einwandfrei!

Sorry für den Aufreger.

[Bernhard_4711]

Ich grabe dieses Thema erneut aus.
Liegt es an Contenido oder an dem Browser Firefox, daß ich dieses seltsame Verhalten des Editors habe, bei dem der Editor quasi unbrauchbar ist?
Grund meiner Frage: Ich möchte eigentlich nicht mit Chrome (o.ä.) arbeiten; ich bin Firefox-Fan und grundsätzlich gegen Google und seine Produkte.

[bodil]

Hi Bernhard!
Ich stehe mit dem 4er etwas auf Kriegsfuß. Aber ich ich habe ihn mal in meiner eigenen Seite (Conteniodo-Version von Mitte März 2023) reinkonfiguriert und kann das Problem komplett NICHT nachvollziehen. Alle Buttons gehen wie zu erwarten.Was bekommst du denn angezeigt, wenn du auf dem nicht funktionierenden Teil der Fläche einen rechten Mausklick machst und den Bereich untersuchst? Auf welchem HTML-Element landet denn dein Klick, wenn nicht auf dem Button?
Grüße!
Bodil

[xmurrix]

Hallo Bernhard,

ich habe das soeben bei einer CONTENIDO-Installation ausprobiert, die Umgebung bei mir war wie folgt:

- CONTENIDO-Installation, auf dem Stand des GitHub Entwicklungszweiges vom August 2023
- Firefox 118.0.1 (64-bit)
- Ubuntu 22.04.3 LTS

Das von dir geschilderte Problem konnte ich nicht reproduzieren.

Falls du die Edit-Buttons im Layout meinst, so sind diese Anker-Elemente und da sie im Layout der Seite integriert sind, kann es sein, dass das CSS des Frontends sich nachteilig auf die Elemente auswirkt.

Der Aufbau der Buttons ist in der Regel wie folgt:

Code: Alles auswählen

<a onclick="javascript:Con.Tiny.setContent('123','https://hostname/path/?foo=bar'); return false;" class="con_img_button con_img_button_content_type" href="#">
    <img src="http://contenido.localhost/contenido/images/but_edithtml.gif" class="con_img">
</a>

Wenn du nur auf den unteren Rand des Buttons klicken kannst, ist das eventuell ein Hinweis darauf, dass das Anker-Element (a) oder das Bild-Element (img) keine ausreichende Höhe hat.
Prüfe mal nach, ob das CSS der Seite da irgendwelche Formate setzt, die das verursachen. CSS-Reset Formate oder globale CSS-Angaben für alle Bilder der Seite können die Ursache sein.

März 2023 herum wurden die CSS-Angaben für das Backend überarbeitet, auch die Formate der Buttons in der Editor-Ansicht, die sollten nicht mehr so anfällig wie früher sein, ganz ausschließen lässt sich das aber nicht.

Es gibt eine überarbeitete CSS-Datei contenido_backend.css, die in das Mandantenverzeichnis (cms/css) gehört und im Backend beim Editieren der Artikel eingebunden wird. Das bringt aber etwas, wenn du einen CONTENIDO-Stand verwendest, der vom 20.03.23 oder neuer ist.

Buttons und andere Elemente, die im Frontend eingebunden werden, haben alle CSS Klassen. Bei den Elementen der Button-Leiste des Inline-Editors ist das auch der Fall. Sollte das CSS des Frontends Probleme verursachen, kann man z.B. mit entsprechenden Selektoren Ausnahmen für diese Bereiche definieren.

Gruß

Murat

[Faar]

... da sie im Layout der Seite integriert sind, kann es sein, dass das CSS des Frontends sich nachteilig auf die Elemente auswirkt.

Genau so war es bei mir oft, wenn irgendein Frontendlayout das (alte) CSS von den Contenido Buttons überschrieben hatte (z.B. img{width:100%} ) oder sich ein sogenannter Layer über die Buttons schob (margin, position-absolute, usw.).
Die Web-Developer Tools der Browser geben Auskunft, was das für ein HTML-Teil ist und welches CSS.

[Bernhard_4711]

Ich habe mich wohl mißverständlich ausgedrückt. Mir geht es nicht nur um die schwer zu treffenden Buttons, sondern der Editor an sich ist nicht brauchbar.
Bei Edge, Chrome und Chromium werden die zu editierenden Seiten komplett anders dargestellt als beim Firefox. Ich versuche mal, Beispiele zu erzeugen; Moment...
So, ich habe dieselbe Seite im Editor aufgerufen, einmal mit Firefox, einmal mit Chrome. Es ist jeweils der Bereich oben nach der zweiten Überschrift und der Bereich ganz unten dargestellt. Im Chrome wird alles richtig dargestellt, wie es "früher" im Firefox auch war. Im Screenshot "Bildschirmfoto_Firefox2.png" kann man sehr gut sehen, wie der Editor die Seite zerhackt.

Ich hoffe, nun wird das deutlicher.

Bildschirmfoto_Chrome1.png

(192.49 KiB) Noch nie heruntergeladen

Bildschirmfoto_Chrome2.png

(197.02 KiB) Noch nie heruntergeladen

Bildschirmfoto_Firefox1.png

(213.2 KiB) Noch nie heruntergeladen

Seltsam, ich bekomme die vierte Datei nicht hochgeladen...

[Bernhard_4711]

#4:

Bildschirmfoto_Firefox2.png

(224.67 KiB) Noch nie heruntergeladen

[xmurrix]

Es ist schwer zu sagen, was genau das Problem bei dir verursacht.

Fehlerhaftes Markup, z. B. ein schließender div-Tag der fehlt, kann auch bei manchen Browsern Probleme verursachen. Auf deiner Seite konnte ich im Markup nichts Auffälliges finden, das eine Ursache dafür sein kann. Auf den ersten Blick sehe ich auch keine Probleme in der CSS, die auf deiner Seite geladen wird.

Es gibt im Netz einige Kommentare von Benutzern, die in Firefox Layout-Probleme haben, manche konnten das auf "display:flex" and "float:left" eingrenzen. Plugins in Browsern können auch mal Probleme bereiten. Kannst du das in Firefox im "Private Browsing" Modus testen, in diesem Modus sind in der Regel keine Browser-Plugins aktiv.

Eventuell passiert da etwas im Backend, wenn man einen Artikel im Backend editiert. Da mich das interessiert, schlage ich dir vor, dass ich mir das mal anschaue. Du kannst mir gerne die Zugangsdaten per PM schicken.

[Bernhard_4711]

Es gibt im Netz einige Kommentare von Benutzern, die in Firefox Layout-Probleme haben, manche konnten das auf "display:flex" and "float:left" eingrenzen. Plugins in Browsern können auch mal Probleme bereiten. Kannst du das in Firefox im "Private Browsing" Modus testen, in diesem Modus sind in der Regel keine Browser-Plugins aktiv.

Ich arbeite grundsätzlich im privaten Modus, habe aber drei PlugIns aktiv: uBlock Origin, Nervenschoner und MetaGer Suche.
Auch ein abschalten dieser PlugIns hat nichts geändert.
Wie ich schrieb, das tritt erst seit kurzer Zeit auf; seit wann genau, weiß ich nicht und ich weiß auch nicht, welche Firefox-Version das zuerst machte. Aufgefallen ist mir das am 20.04.2023.

Eventuell passiert da etwas im Backend, wenn man einen Artikel im Backend editiert. Da mich das interessiert, schlage ich dir vor, dass ich mir das mal anschaue. Du kannst mir gerne die Zugangsdaten per PM schicken.

UgotMail

[xmurrix]

Das ist sehr interessant, das Text-Element (Modul content_text) wird in Firefox, warum auch immer, am Ende des Inhalts-Containers (box_content_center) gerendert, wenn man die Seite im Backend im Editier-Modus öffnet.

Das passiert auch im neuesten Firefox unter Windows, also scheint es ein allgemeines Firefox-Problem zu sein.

Der Aufbau der Seite ist ungefähr so:

Code: Alles auswählen

<div class="box_content_center">
    <modul_name_1 />
    <modul_name_2 />
    <content_text />
    <modul_name_3 />
    <modul_name_4 />
    ...
</div>

Ruft man die Seite im Editier-Modus auf, landet das Modul "content_text" am Ende:

Code: Alles auswählen

<div class="box_content_center">
    <modul_name_1 />
    <modul_name_2 />
    <modul_name_3 />
    <modul_name_4 />
    ...
    <content_text />
</div>

Das ist nicht in der Ausgabe der Seite der Fall, sondern geschieht beim Rendern der Dom-Elemente. Die genaue Ursache weiß ich nicht, ich vermute aber, dass ein TinyMCE-Problem sein könnte oder eine Kombination aus TinyMCE und Firefox.

Folgende Änderung im Template des Moduls "content_text" hat das Problem gelöst:

Code: Alles auswählen

<!-- content_text -->

{if 0 lt $label|strlen}
    <label class="content_type_label">{$label|escape}</label>
{/if}

{if 0 lt $label|strlen}<div>{/if}
{$text}
{if 0 lt $label|strlen}</div>{/if}

<!-- /content_text -->

Die Template-Variable $text wird von einem div-Element umschlossen, wenn das Label gesetzt ist, also wenn man im Backend Editier-Modus ist.

Vermutlich versucht TinyMCE beim Initialisieren des Editors das Dom-Element für den Inhalts-Typ "CMS_HTML" im übergeordneten Elternelement neu zu platzieren. Wenn das übergeordnete Elternelement das '<div class="box_content_center">' ist, landet es am Ende des Inhalts-Containers. Umschließt man das Dom-Element für "CMS_HTML" im Modultemplate mit einem '<div>', bleibt es auch an der Stelle.

Die Änderung im Template des "content_text" Moduls habe ich wieder rückgängig gemacht. Bernhard, wenn du willst kannst du das, wie oben beschrieben, übernehmen.

[Bernhard_4711]

Das ist sehr interessant, das Text-Element (Modul content_text) wird in Firefox, warum auch immer, am Ende des Inhalts-Containers (box_content_center) gerendert, wenn man die Seite im Backend im Editier-Modus öffnet.

Das passiert auch im neuesten Firefox unter Windows, also scheint es ein allgemeines Firefox-Problem zu sein.

Sehe ich auch so.

Die Änderung im Template des "content_text" Moduls habe ich wieder rückgängig gemacht. Bernhard, wenn du willst kannst du das, wie oben beschrieben, übernehmen.

Ich habe die Änderungen übernommen. Nun sitzen die einzelnen Teile an der richtigen Stelle.
Allerdings sind mir trotzdem Unterschiede aufgefallen; auch hier sagen Screenshots mehr als tausend Worte:

Bildschirmfoto_Chrome3.png

(183.18 KiB) Noch nie heruntergeladen

Bildschirmfoto_Firefox3.png

(214.66 KiB) Noch nie heruntergeladen

Bildschirmfoto_Chrome4.png

(170.17 KiB) Noch nie heruntergeladen

Und wieder kann ich nur drei Bilder einfügen...

[Bernhard_4711]

Screenshot #4:

Bildschirmfoto_Firefox4.png

(203.88 KiB) Noch nie heruntergeladen