Editor bei Wordpress

Naja, wenn Du auf diesen JS Effekt vom WP Editor verzichten kannst, kannst Du doch auch den Bilderupload vom FCK Editor benutzen. Find den nicht viel schlechter. Bilder lassen sich damit ebenso wie beim mitgelieferten Editor vom eigenen Rechner oder von einer beliebigen URL hochladen und per CSS ausrichten.

Nein, es funktioniert leider nicht. Es wird nämlich in dem Moment gelöscht, wo man den Visuell - Editor aufruft und speichert bzw. zwischen HTML und Visuell wechselt.

Der Editor von WP mag keine <br /> und auch keine reinen <p>-Tags, warum auch immer.

Nach vielen Versuchen habe ich es nach der klassischen Methode versucht, mit Cleargif und es funktioniert:

<p style="text-align: justify;"><img src="http://www........de/cleargif.gif" alt="" width="220" height="1" /></p>

Ich habe nicht ausprobiert, ob man das <p>-Tag braucht, aber wenn dann auf jeden Fall mit Attributen, ansonsten wird es auch wieder gelöscht. Dann mit width und height ausprobieren, welche Werte zum Erfolg führen und wieviel Leerraum man haben will.

Ich finde das schon merkwürdig, dass Leerzeilen einfach gelöscht werden und man auf so komplizierte Sachen ausweichen muss.

Was spricht gegen eine Leerzeile mit <br />, dass WP sie unbedingt löschen muss?

Zitat von flowers@jesus-initiative

Ich habe nicht ausprobiert, ob man das <p>-Tag braucht, aber wenn dann auf jeden Fall mit Attributen, ansonsten wird es auch wieder gelöscht. Dann mit width und height ausprobieren, welche Werte zum Erfolg führen und wieviel Leerraum man haben will.

Ich finde das schon merkwürdig, dass Leerzeilen einfach gelöscht werden und man auf so komplizierte Sachen ausweichen muss.

Was spricht gegen eine Leerzeile mit <br />, dass WP sie unbedingt löschen muss?

Viele Leerzeilen und massig Leerzeichen sind doch nur ein Ersatz für unzureichendes Styling per CSS.
Wenn ich ein Bild mit 50px Abstand nach oben in den Artikel haben will, dann geb ich dem Bild eine class="obenluft" die ich im CSS File dann definiere mit:

.obenluft { margin-top: 50px; }

Und schon hab ich meinen gößeren Abstand. Inplace Styling ist schlechter Stil, dazu gibt es CSS Dateien, die auch noch browserspezifisch geliefert werden können.
Die HTML spezifikationskonformen Browser komprimieren ja auch x Leerzeichen zu einem zusammen, weil das nicht statthaft ist nach HTML.
Layout und Content sind 2 verschiedene Sachen, Content wird in HTML/XHTML ausgezeichnet und das Layout per CSS definiert.

Zugegeben, der Editor vergreift sich manchmal, aber sobald man class="..." benutzt, bleibt die auch erhalten. Mehr braucht es auch nicht.

Die definierten CSS Regeln lassen sich ja auch zusammensetzen und auf Paragraphen, Div's oder sonstiges anwenden. Man kann ja auch mehrere angeben wie: [COLOR=Black]<p class="[/COLOR]topbigspace[COLOR=Black] red clear">...</p>[/COLOR] mit

.topbigspace { margin-top: 80px; }
.red { color: #f00; }
.clear { clear: both; }

@code-styling:
Ehrlich gesagt kann ich CSS nur so oberflächlich, genug um die Stylesheet-Datei ein wenig zu verstehen und ein paar Änderungen vorzunehmen. Dafür sind solche Sachen wie WP ja auch da, dass man kein Profi in HTML, CSS oder PHP sein muss.

Wie löst man denn das Problem mit CSS, dass man z.B. drei Zeilen Text rechts neben einem Bild schreiben kann, dann z.B. drei Leerzeilen eingibt (oder eben entsprechendes per CSS!), damit der weitere Text unterhalb eines Bildes weitergeht und das nächste Bild nicht neben dem vorherigen Bild klebt, sondern unter jenem.

Siehe mein Beispiel: Herofactory » Playstage mit den Veranstalterlogos.

Warum ist es schlechtes Styling, wenn ich in einem Fließtext mal eine Leerzeile extra haben will?

Zitat von fischnackdissen

Ich bin leider vieeel zu schwach in Programmieren und kann daher nur meine Wünsche nennen :) aber leider keinen Editor selber verbessern bzw. umprogrammieren.

Das ist vollkommen ok, niemand muß alles können. Allerdings ist bei Kundenaufträgen ein wenig Programmierung immer von Vorteil, denn dann kann man das machen, was ich als Screenshot angehängt hab. Man gibt dem Benutzer/Kunden einfach die Möglichkeit, im Editor spezielle Formatierungen machen zu können.

Die gezeigte Erweiterung ist integraler Bestandteil des Freshy Themes (nicht von mir) aber auch ich hab schon Extensions für jemanden integriert, der es komfortabel braucht.

Und zum Editor (TinyMCE) kann man folgendes festhalten: Die "Verunstaltung" von Codeeingaben ist [COLOR=Red]nicht[/COLOR] Bestandteil des Editors selbst, denn der wird auch in anderen Projekten (nicht WordPress) ohne diese Probleme eingesetzt. Es ist die Philosophie von WordPress, dass die Beiträge im Grunde keinen Code enthalten sollen und werden durch eine WordPress spezifische Anpassung nach bearbeitet, die manchmal eben nicht das macht, was man gern hätte. Dies kann man auch "totlegen", aber eben mit dem Ergebnis, das dann in der DB nicht mehr der pure Text landet (was WP eigentlich haben will) sondern der ganze Markup eben auch. Hatte das schon mal aus der WP 2.3.3 rausgebaut und schaue gerade, wie ich das aus WP 2.5.1 rausbauen kann, denn der Editor und WP Anpassungscode ist 100% neu (neues Konzept auf Prototype.js).

Wäre dann aber eben auch ein Patch und somit nicht Update sicher.

Zitat von flowers@jesus-initiative

Wie löst man denn das Problem mit CSS, dass man z.B. drei Zeilen Text rechts neben einem Bild schreiben kann, dann z.B. drei Leerzeilen eingibt (oder eben entsprechendes per CSS!), damit der weitere Text unterhalb eines Bildes weitergeht und das nächste Bild nicht neben dem vorherigen Bild klebt, sondern unter jenem.

Entschuldige, das ich nicht genau weiß, welche Bilder und Anordnungen du aus deiner Seite meinst. Es hängt ein wenig von Bildformaten ab (ich benutze zum Beispiel feste Formatgrößen, nur wenige), für die man das sehr schön machen kann. Ausserdem sind in <p> zwar keine <div> erlaubt (Blocktag in Blocktag) aber man kann <span> benutzen, weiteren Text reinstapeln, klassifizieren und dann per CSS die <span> zum Blocktag machen (display:block). Das ist durch die Brust ins Auge aber der HTML Markup validiert. Spezifischer hab ich's jetzt nicht, da ich nicht weiss, was genau du meinst.

Vielen Dank für die Antwort. Ich versuche das mal zu verstehen.

Ich meine die Logos der Veranstalter weiter unten. Eigentlich möchte ich nur ein Bild haben, ein paar Zeilen Text darum umbrechen, die genau zum Bild gehören. Dann eigentlich den Befehl <br clear="all"> benutzen, damit der weitere Text unter dem Bild geschrieben wird.

Aber diesen Befehl löscht der Editor seit 2.5. Bis dahin ging das so.

So trivial ist das Ganze leider nicht. Dazu muß man

1. ein WordPress Plugin schreiben, das
2. ein TinyMCE Plugin in den Editor integriert, welches man
3. ebenfalls in JavaScript schreiben muß.

Das heißt, du braucht Ahnung von WP Plugin Codierung, Wissen um den Aufbau und Verwendung von JavaScript Plugins für den TinyMCE und Kenntnisse, wie das mit dem Editor interagiert.

Das mal eben schnell aus dem Ärmel schütteln geht vermutlich nicht, dabei riskiert man einen funktionslosen oder schlimmstenfalls nicht mehr erscheinenden Editor.

Ich kann dir da leider kein Tutorial bieten, wäre aber ein interessantes Projekt, wenn ich mit meinen Laufenden durch bin.

codestyling
Nachdem ich Deinen Beitrag nochmal gründlicher gelesen habe, habe ich jetzt die Lösung gefunden, die WP akzeptiert. Vielen Dank.

Statt des Befehls <br clear="all">, der bisher akzeptiert war, muss man <br style="clear:left;" /> schreiben. So kann man ein paar Zeilen Text um ein Bild umfließen lassen und den Punkt frei definieren, wann er unter dem Bild weitermachen soll.

Außerdem kann man auf diese Weise soviele Freizeilen einfügen, wie man will.

@ codestyling

in welcher css-datei würde ich
.topbigspace { margin-top: 80px; }
.red { color: #f00; }
.clear { clear: both; }

etc denn einbinden???

Dass der Text nicht unterm Bild weiterfließt sondern daneben ist ein echtes Problem. Am Liebsten hätte ich ja eine Lösung für die visuelle Eingabemaske für die absoluten HTML-Dummies...

Zitat von Ilsebilse

@ codestyling

in welcher css-datei würde ich
.topbigspace { margin-top: 80px; }
.red { color: #f00; }
.clear { clear: both; }

etc denn einbinden???

Dass der Text nicht unterm Bild weiterfließt sondern daneben ist ein echtes Problem. Am Liebsten hätte ich ja eine Lösung für die visuelle Eingabemaske für die absoluten HTML-Dummies...

Schau mal hier: http://forum.wordpress-deutschland.org/design/35528-c…html#post171477
Hab das CSS Styling mal in ein kleines Plugin gegossen.

Super - vielen Dank! Es funktioniert bei mir!!!
Bin überglücklich!