Editor - unerw. automatisches Hinzufügen von <br>-Tags

  • Hallo zusammen,

    ich musste ein sehr interessantes Phänomen feststellen. So werden beim Default-Editor in WP 3.9 automatisch Zeilenumbrüche hinzugefügt. Beispiel:

    WP-Editor (Text):

    Zitat

    <div class="titleBar"><span>Test</span><h1>testheader</h1></div>

    Wird zu DOM:

    Zitat

    <div class="titleBar"><span>Test</span><br>
    <h1>testheader</h1>
    </div>

    Woran kann dies liegen? Es ist nicht einmal ein Leerzeichen vorhanden.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Woran kann dies liegen? Es ist nicht einmal ein Leerzeichen vorhanden.


    Vermutlich genau daran, denn H1 gehört als Blockelement ja eigentlich in eine neue Zeile. So lässt Du ein Blockelement auf ein Inline-Element folgen. Vom Editor wird dann wohl voller Entsetzen ein \r\n eingefügt, um das schlimmste Chaos zu verhindern, was WP beim Abruf aus der Datenbank in ein <br /> umwandelt. Vermute ich nur, dass es daran liegt, getestet habe ich es nicht.

    Einmal editiert, zuletzt von Melewo (3. Juni 2014 um 22:36)

  • Hallo Melewo,

    selbst wenn ich halle in eine separate Zeile schreibe, funktioniert es nicht wie gewünscht. Das Ergebnis dieses Mal:

    Zitat

    <div class="titleBar">
    <span>Test</span><p></p>
    <h1>testheader</h1>
    </div>

  • Ja dann ist das bei Dir aus irgendeinem Grund anders. Benutzt Du Plugins für den Editor oder Frameworks oder verhält sich der Editor in allen Browsern mit einem Standard-Theme so?
    Wenn ich den ganz normalen TinyMCE von WP nehme, so sieht das bei mir bei einem Wechsel von Visuell zur Textansicht im Editor so aus:

    HTML
    <div class="titleBar">
    
    
    <span style="font-family: arial;">Test</span>
    <h1>testheader</h1>
    </div>


    Und bei der Ausgabe im Quelltext so:

    HTML
    <div class="titleBar">
    <p><span style="font-family: arial;">Test</span></p>
    <h1>testheader</h1>
    </div>


    So wie bei Dir,

    HTML
    <span>Test</span>


    span-Tags ohne Attribute entfernt mein Editor, musste deshalb etwas innerhalb des einleitenden span-Tags notieren.

    Einmal editiert, zuletzt von Melewo (4. Juni 2014 um 09:33)

  • HTML
    <span>Test</span>


    span-Tags ohne Attribute entfernt mein Editor, musste deshalb etwas innerhalb des einleitenden span-Tags notieren.

    Oh, das dürfte dann aber ein Bug sein, oder? Ich habe das auch beobachtet, dachte aber, es läge am themify builder plugin. Werde ich nachher mal genauer untersuchen. Ich hatte das nämlich auch bei Ankerlinks.

    HTML
    <a id="ankerlink"></a>


    wird einfach entfernt. Musste es wieder in das nicht W3C validierende

    HTML
    <a id="ankerlink" name="ankerlink"></a>


    umschreiben. Aber habe das noch nicht unter Standardbedingungen (Standardtheme und TinyMCE) überprüft.

  • Nachtrag: Gerade getestet. Span und A - Tags werden heraus gelöscht, wenn man zwischen Visual- und Text-Editor hin-und her schaltet und zwischendurch abspeichert. Im Standardtheme Fourtheen und Standard TinyMCE.

    Und dein Code

    HTML
    <div class="titleBar"><span>Test</span><h1>testheader</h1></div>

    wird zu

    Code
    <div class="titleBar">Test
    <h1>testheader</h1>
    </div>

    Einmal editiert, zuletzt von La Geek (4. Juni 2014 um 10:15)

  • HTML
    <a id="ankerlink"></a>


    wird einfach entfernt. Musste es wieder in das nicht W3C validierende


    Scheint mir eine weise Entscheidung vom Editor zu sein.
    Sollte ja eigentlich so aussehen:

    HTML
    <a href="#ankerlink">Springe zu</a>


    Und auf ein Blockelement verweisen:

    HTML
    <p id="ankerlink">Text ...... </p>


    Habe es aber gerade nicht getestet, doch in einem leeren a-Tag hat eigentlich keine Id etwas verloren.

    Edit: Habe es getestet, so wie von Dir notiert, fliegt es auch bei mir raus, so hingegen nicht:

    HTML
    <a href="#ankerlink">Springe zu</a>
    
    
    Text...
    
    
    <p id="ankerlink">Text ......</p>


    Braucht jetzt kein p-Tag zu sein, sondern irgend ein richtiges Element halt.

    Einmal editiert, zuletzt von Melewo (4. Juni 2014 um 10:20)

  • Doch doch. Hat schon seine Richtigkeit:
    http://webkompetenz.wikidot.com/html-handbuch:links-anker


    Warum die das da so gescrieben haben

    HTML
    <h1><a id="kapitel1">Kapitel 1</a></h1>
    <h2><a id="abschnitt1">Abschnitt 1</a></h2>


    weiß ich nicht und kann es auch nicht nachvollziehen. Ich würde es so schreiben und schreibe es auch so:

    HTML
    <h1 id="kapitel1">Kapitel 1</h1>
    <h2 id="abschnitt1">Abschnitt 1</h2>


    Und alles im Zusammenhang dann so:

    HTML
    <a href="#kapitel1">Kapitel 1</a> 
    <a href="#abschnitt1">Abschnitt 1</a>
    
    
    
    
    <h1 id="kapitel1">Kapitel 1</h1>
    <h2 id="abschnitt1">Abschnitt 1</h2>
  • Die Seite ist zwar nicht neu, doch die Beispiele sehen dafür besser und verständlicher aus:

    HTML
    <h1 id="zweitens">Eine zweite Überschrift</h1>


    http://wiki.selfhtml.org/wiki/HTML/Text…nterne_Verweise

    Im HTML5 Handbuch ist das gleiche Beispiel mit

    HTML
    <h1><a id="kapitel1">Kapitel 1</a></h1>
    <h2><a id="abschnitt1">Abschnitt 1</a></h2>


    enthalten, wie ich gerade sehe. Somit dürfte es dann am Eigenleben des TinyMCE liegen. Die Variante mit <Element Id="vom Element"> ... </Element> sollte jedoch problemlos möglich sein.

    Einmal editiert, zuletzt von Melewo (4. Juni 2014 um 11:11)

  • Ich kenne es schon ewig mit <a id="">. Neu ist nur, dass der name tag in HTML5 nicht mehr valide ist. Hier noch mal zwei Links von w3c.org, den "Bestimmern", was valide ist und was nicht:

    http://www.w3.org/wiki/HTML_links_-_lets_build_a_web
    http://www.validome.org/lang/ge/errors/ANCHOR

    Ohne Text sind empty anchors, geht absolut und ist in der Norm. Das "Eigenleben" von TinyMCE ist eher ein großer Bug. In Joomla! (mit TinyMCE) z.B. werden die span - Tags (etc.) NICHT raus gelöscht. Da kann man ohne Probleme von visuell in html- mode switchen. Welches und ob ein CMS überhaupt da irgendwelche Eigenentwicklkungen drin hat, weiß ich allerdings nicht.

  • Wie bereits geschrieben, im HTML5 Handbuch ist es ja auch so mit <a id=""> enthalten und das Ding ist von Münz und Gull, mit einem Referenzteil. Somit sollte das schon seine Richtigkeit haben. Auf eine Seite vom W3C bin ich auch noch gestoßen, die ein Beispiel mit <a id=""> enthielt.

    Ein JavaScript Online-Editor ist und bleibt halt nur ein JavaScript Online-Editor, doch wo es nun genau dran liegt, ist ohnehin kaum auszumachen. Mir ist es nur mit <a name=""> aufgefallen, in meinen älteren Seiten verwendete ich es immer, doch innerhalb von WP wurde es bei mir immer so gewürfelt, wie ich es nicht haben wollte, bis ich mich davon verabschiedete und gleich bei <h3 id="">... </h3> blieb.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!