WBCE CMS Forum

stefanek

Core-Team

[s]CodePress[/s] EditArea Darstellungsprobleme

In einigen Modulen, unter anderem Droplets, wird der alte CodePress Editor EditArea verwendet.

Das Script hat schon seit 2007 kein Update mehr erfahren und mir scheint, es kommt langsam in die Jahre.

Ich beobachte oft seltsame Darstellungsprobleme (siehe Screenshot).
Erst wenn ich das syntax highlighting ausstelle verschwindet der Fehler (aber auch die farbliche Hervorhebung).
Habt ihr ähnliche Probleme beobachtet?
Lösungsansätze?

Ich habe an einen Ersatz gedacht. CodeMirror kommt als erstes in Frage, aber vielleicht hat jemand einen guten, besser geeigneten Vorschlag?

Welche Module verwenden CodePress außer Droplets. Da kommt mir noch AddonFileEditor in den Sinn. Mehr auch nicht auf die Schnelle.

Gruß,
Christian

Beitrag geändert von stefanek (15.03.2020 13:47:01)

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

bernd

Core-Team

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Wird wohl an der Uhrzeit liegen 

... (siehe Screenshot).

Da seh ich schonmal ... nix.

Ernsthaft:
bist du dir sicher mit Codepress?!?
Droplets verwendet doch "Edit Area" und dann wohl andere Module auch, gehört ja zum "Lieferumfang".
O.k. Edit Area dürfte seine Glanzzeiten auch schon (deutlich) hinter sich haben, dürfte also nix schaden da mal auf was moderneres umzustellen. CodeMirror scheint mir da ein ganz vernünftiger Ersatz zu sein.
Man kann ja dann Edit Area noch für eine Übergangszeit mitschleppen damit es keine bösen Überraschungen gibt.

---

... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

giz

Mitglied

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Beim AddonFileEditor nervt's mich auch, dass Code manchmal gar nicht als solcher angezeigt wird (dann auch keine Zeilenangaben etc.); auch nicht nach 10x F5. Als wenn der komplette Editor manchmal Schluckauf hätte... (die Funktion "Editor an-ausschalten" hatte bei mir übrigens noch nie eine Funktion)

---

WBCE 1.6.8 - PHP 8.4.27 - All-inkl
Ein Leben ohne Hund ist möglich, aber sinnlos
#Akkusativ ist kein Verbrechen

stefanek

Core-Team

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

@Bernd
:-D

Ja, ich ging noch in's Bett und mein letzter Gedanke war: "Ich glaube ich habe das screenshot nicht angehängt."
Definitiv die Uhrzeit. (Hänge ich oben jetzt an.)

Und ja, auch EditArea, nicht CodePress. Beides Dinosaurier irgendwie.

Danke @giz.

Ich werde mal schauen, inwieweit man EditArea reibungslos durch CodeMirror ersetzen kann.

Gruß,
Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

florian

Administrator

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

@stefanek
ich vermute, es hängt mit der Schriftart bzw. damit zusammen, welcher Browser/welches Betriebssystem verwendet wird. Den Darstellungsfehler hatte ich noch nicht (Windows 10/Firefox) .

@giz
Vermutlich ist da ein Javascriptfehler. Welche WBCE- und welche Fraggy-Backend-Theme-Version und welchen Browser/OS verwendest Du?

Davon abgesehen kann Editarea natürlich gern durch CodeMirroer ersetzt werden.

giz

Mitglied

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

@giz
Vermutlich ist da ein Javascriptfehler. Welche WBCE- und welche Fraggy-Backend-Theme-Version und welchen Browser/OS verwendest Du?

...

Dieses Problem habe ich seit WBCE 1.3.1 mit der dazu jeweiligen aktuellen Fraggy-Version. /da fing ich mit WBCE an/ (zZt WBCE 1.4.2 Fraggy 2.3.1)
Browser Fx (jeweils aktuell) Win10
Konsole schmeißt dabei nichts aus.
Den Darstellungsfehler von stefanek kenne ich auch, manchmal überlappen sich auch die Zeilen, so dass man nicht erkennt, welche Zeile man am Bearbeiten ist.

Nachdem ich mal so ca. 250 verschiedene Dateien aus verschiedenen Ordnern (php, css, js, md) am Stück durchgetestet habe, fiel mir auf, dass das o.a. Verhalten nur mit dem Fraggy Backendtheme auftritt. (dazu gehört auch der Fehler/Verhalten, dass sich zB der Ordner des CKE mit dem AFE nicht öffnen lässt (Seite bleibt weiß)- auch nur unter Fraggy, bei Argos funktioniert auch das.
Vlt hilft das ja bei der Fehleranalyse.

---

WBCE 1.6.8 - PHP 8.4.27 - All-inkl
Ein Leben ohne Hund ist möglich, aber sinnlos
#Akkusativ ist kein Verbrechen

stefanek

Core-Team

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Ich bin jetzt bei meinen Eltern, aber vorhin habe ich etwas damit rumgespielt, Codemirror einzubinden.
Es geht soweit. Einiges muss ich noch optimieren.

So wie ich es umsetze würde man nicht an jedes Modul bei müssen, sondern es würde einfach weiter funktionieren nur eben mit CodeMirror und nicht mehr mit EditArea.
Allerdings gehen manche Module bei der Einbindung eigene Wege, so auch AddonFileEditor. Hier müsste man an das Modul bei, aber auch das ist kein großes Problem.

Ich schau mal die Tage, dann lade ich was zum Testen hoch.

Gruß,
Chrisian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

stefanek

Core-Team

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Ich habe das soweit am laufen,
allerdings habe ich ein Problem mit den responsiven Admin Backend Themes.
Sobald der Code über die Breite des Editors geht, verbreitert sich der Editor, wenn seine "width:" Angabe nicht fix in px sondern in % angegeben ist.
Das sorgt dafür, dass der Editor außerhalb des sichbaren Bereichs gelangt und man sieht den Code nicht mehr.
Wenn der Editor auf feste/fixe Breite gesetzt wird, sagen wir mal  "width: 750px" ist er nicht mehr responsive und skaliert nicht mit der Umgebung mit.
Nicht so cool.

Gibt's jemanden, der Lust hat, sich das anzuschauen und seine CSS Kenntnisse zum Besten zu geben?

Gruß,
Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

colinax

Developer

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Gibt's jemanden, der Lust hat, sich das anzuschauen und seine CSS Kenntnisse zum Besten zu geben?

Das kann ich gerne übernehmen

stefanek

Core-Team

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

OK Christoph,

ich hänge an:

codemirror.zip -> einfach in den /include Ordner rein

editarea.zip -> im /include Ordner austauschen

Droplets funktionieren dann direkt mit CodeMirror und da kannst Du Dir das beschriebene Problem anschauen.

Gruß, viel Spaß und Erfolg,
Christian

P.S. das Paket von CodeMirror ist noch recht groß. Anschließend können wir es auf die Dateien reduzieren, die für WBCE relevant sind.

Beitrag geändert von stefanek (15.03.2020 14:25:09)

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

colinax

Developer

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

So, dass ging relative schnell.

Um das Problem zu lösen muss man bei der class CodeMirror das display: block; durch display: grid; oder display: inline-grid; ersetzen.

Ich hab die Ursache dafür noch nicht gefunden, vermute aber dass die modernen Browser die table über display: grid rendern.

Der Grund für die Vermutung ist, da die textarea und der div unter display: block; bis zum table Tag überlappen.

florian

Administrator

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Das ist ja schon recht vielversprechend.
Gibt es die Möglichkeit, ähnlich wie zuvor bei Editarea einen Button o.ä. einzubauen, um das Code-Eingabefeld auf Fullscreen zu vergrößern, oder zumindest in der Höhe anpassbar (größer ziehen) zu machen?

Beitrag geändert von florian (15.03.2020 16:31:52)

colinax

Developer

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Gibt es die Möglichkeit, ähnlich wie zuvor bei Editarea einen Button o.ä. einzubauen, um das Code-Eingabefeld auf Fullscreen zu vergrößern, oder zumindest in der Höhe anpassbar (größer ziehen) zu machen?

Teilweise über Addons ja:

Addon für Buttons: https://github.com/samdark/codemirror-buttons
Addon für Fullscreen: https://codemirror.net/doc/manual.html#addon_fullscreen

stefanek

Core-Team

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Florian,
ja, habe es schon eingebaut. Mit F11 geht das.
Man könnte wahrscheinlich auch eine Leiste basteln mit all den Knöpfen, die es auch bei der EditArea gab.

Christoph. Danke. Schau ich gleich mal.

Gruß,
Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

stefanek

Core-Team

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

So, dass ging relative schnell.

Um das Problem zu lösen muss man bei der class CodeMirror das display: block; durch display: grid; oder display: inline-grid; ersetzen.

Das sieht schon ganz gut aus, aber Umgebungsabhängig funktioniert es nicht erwartungsgemäß.

Im Vollbildmodus entsteht oben ein Rand (screen.png).
EDIT: Das ist leicht zu beheben, indem man im Selector .CodeMirror-fullscreen {} mit display:block; überschreibt

In einem anderen Modul, an dem ich grade arbeite und welches ein Tabellen loses Layout hat, ist der gleiche Rand immer sichtbar (screen2.png)

Aber ich denke wir sind auf dem richtigen Weg.

Edit: screen.png entfernt, hat sich erledigt.

Beitrag geändert von stefanek (15.03.2020 23:27:35)

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

colinax

Developer

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Was screen2 angeht, dass wird durch display: grid; oder display: inline-grid; verursacht der Wert muss wieder zu display block zurück.

Wenn das Modul keine table hat dann richtet es sich nach der former_positioning_table aus.

Installiere und aktiviere dass Fraggy Theme das hat diese Tabelle nicht

Mach mal folgendes setze den Editor in den Grundeinstellungen auf Keine, mach eine neue Seite mit je einem Abschnitt WYSIWYG, Code und Code2.

Damit die beiden Code Module den CodeMirror schön darstellen können muss in der custom.css die Zeile 8 mit max-width: 775px; weg und in der codemirror.css die Zeile 6 mit min-height: 200px !important; ersetzt werden.

Wenn diese 3 Module identisch auf den CodeMirror reagieren und funktionieren (dass tun sie aktuell nicht) sollten wir unsere Basis gefunden haben.

Beitrag geändert von colinax (16.03.2020 01:14:37)

stefanek

Core-Team

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Das schaue ich mir die Tage an.
Fraggy alleine kann nicht die Lösung sein. Das CodeMirror sollte in allen Umgebungen funktionieren, ob Tabelle oder tabellenlos.
Danke für die Tipps Christoph.

Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

colinax

Developer

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Fraggy alleine kann nicht die Lösung sein. Das CodeMirror sollte in allen Umgebungen funktionieren, ob Tabelle oder tabellenlos.

Stimmt schon. Nur aktuell haben wir 2 Probleme mit CodeMirror:

CodeMirror verhält sich komisch in Tabellen
CodeMirror verhält sich je nach Modul unterschiedlich

Wenn wir wie in #16 es schaffen dass sich die Module einheitlich verhalten, dann sollte es auch einfacher möglich sein heraus zu finden warum die Tabellen stören.

stefanek

Core-Team

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

CodeMirror verhält sich komisch in Tabellen.

Ja gut, das haben wir (Du) schon ganz gut abgefangen und in Droplets funktioniert es ganz gut.

CodeMirror verhält sich je nach Modul unterschiedlich

Genau, weil das HTML Grüst drum-herum unterschiedlich ist.

Wenn wir wie in #16 es schaffen dass sich die Module einheitlich verhalten, dann sollte es auch einfacher möglich sein heraus zu finden warum die Tabellen stören.

Das können wir bei den Modulen die mit dem Paket ausgeliefert werden machen.
Es sind ja nicht viele Module, die EditArea verwenden. Hast Du auf dem Schirm, welche es sind?

Auch welche Module, die nicht im Paket mit ausgeliefert werden?
Ich kenne nicht viele Module, da ich meistens mit selbst gemachten Modulen arbeite.

Ich kann die Tage ein Gerüst hochladen und vielleicht kannst Du es auch "knacken", sodass CodeMirror darin gut aussieht.

Gruß,
Christian

---

“Success is the progressive realization of a worthy ideal.” ― Earl Nightingale

florian

Administrator

Re: [s]CodePress[/s] EditArea Darstellungsprobleme

Zur Frage nach Modulen:
- Code2 verwendet bereits Codemirror

EditArea in
- Droplets
- AFE
- Code / Code without Evil
- Cookie Consent
- Guestbook
- Frontend Final CSS
- OPF Dashboard (Inlinefilter)

Mehr fallen mir auf Anhieb nicht ein. Kann aber sein, dass es noch weitere gibt (oder wo Syntaxhighlighting sinnvoll wäre).