Tinymce-Bilder werden automatisch eingepackt Schild. CSS-Umwege oder Texteditor-Hacks

Hallo,
Ich bin jetzt schon oft auf dieses Problem gestoßen, wenn ich drupal oder WordPress verwende, wo meine tinymce-Konfigurationsdateien etwas zu geschickt abstrahiert sind.

Das Problem ist, dass tinymce meine automatisch umschließt <img> Tags ein <p> Stichworte. Wenn es einen Weg gibt, dies entweder in WordPress oder Drupal zu umgehen, wäre das großartig.

Mein Problem besteht, wenn ich so etwas tun möchte

<style>
    img {
        float: left;
    }
    p {
        float: right;
        margin-right: 20px;
        width: 400px;
    }
 </style>

und ich möchte, dass mein Code so aussieht

<img src="https://stackoverflow.com/questions/5819956/some_png.png" />
<p> Imagine a lot of lipsum text.</p>

aber tinymce macht das

<p><img src="https://stackoverflow.com/questions/5819956/crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>

Ich versuche, ein Bild links von einem Absatz mit einer festgelegten Breite zu schweben, ohne Breitenbeschränkungen für das Bild selbst zu haben.
In diesem Fall erhält das Elternteil des Bildes dann ein Breiten- und ein Float-Recht. Das ist nicht was ich möchte.

Es ist sehr wahrscheinlich, dass es dafür eine einfache, clevere Lösung gibt, aber ich habe immer noch keine gefunden. Ich würde es vorziehen, meine Konfigurationsdateien nicht zu hacken, wenn ich nicht muss.

1 Vorbehalt …
Der einzige Grund, warum dieses Problem besteht, ist, dass ich möchte, dass Kunden in der Lage sind, ihre eigene Bearbeitung so einfach durchzuführen Ich lasse sie das Bild nicht einfach in a einwickeln <div> anstelle einer <p>. Das scheint mir für meine Kunden, die die eigentlichen Benutzer des Wysiwyg sind, nicht intuitiv zu sein

Vorherige Lösung

Ich habe eine Regex verwendet, um die Absatz-Tags zu entfernen, aber es ist immer irgendwie problematisch. Am Ende füge ich woanders mehr Bilder hinzu, dann muss ich meine Regex weiter optimieren, um sie zu ignorieren. 502 Fehler gibt es zuhauf!

meine frage(n) ist(sind)
Was kann ich in meinem CSS tun, damit das in den Absatz eingeschlossene Bild das tut, was ich möchte?

und wenn ich nicht kann
Was kann ich speziell für Drupal oder WordPress tun, damit dieser Absatz verschwindet?

— Bearbeiten — die Lösung muss mit IE7+ und modernen Browsern kompatibel sein. 😛

Vielen Dank!
Aaron

Sie rufen tinyMCE mit der Funktion tinyMCE.init auf, nicht wahr?

Fügen Sie also diesen String hinzu:

forced_root_block : false,

Sie können auch tiny_mce_src.js ändern. Finden

forced_root_block : 'p',

und ändern Sie es in

forced_root_block : false,

PS Vergessen Sie nicht, den Cache zu löschen.

Wenn Sie nicht möchten, dass Bild-Tags umbrochen werden, suchen Sie in der Tinymce-Quelle nach einer Funktion namens “isBlock”. Es gibt einen Whitelist-Test für reguläre Ausdrücke, der feststellt, ob ein Element ein Blockelement ist oder nicht. Wenn Bild-Tags als Blockelemente behandelt werden sollen, fügen Sie “IMG” zur Liste der gesuchten Knotennamen hinzu. Ich musste das einfach selbst machen, suche im Moment noch nach negativen Nebenwirkungen, aber es löst das unmittelbare Problem.

BEARBEITEN: Das war mehr oder weniger eine vorübergehende Lösung. Wenn Sie nur das Blockumschließen von Bild-Tags auf Root-Ebene stoppen müssen, gibt es eine Funktion namens “forceRoots”, mit der Sie tatsächlich Ihre Bild-Tag-Prüfung durchführen möchten. Ich habe es getan, indem ich diese Codezeile geändert habe:

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8)) {

so aussehen:

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8) && nx.nodeName.toLowerCase() != "img") {

Damit ist das Problem für mich ganz gut gelöst.

Wenn wir über eine WordPress-Site sprechen, gibt es einen lästigen Filter, der einige Elemente innerhalb des Inhalts automatisch mit einem

-Tag namens umschließt wpautop. Es wird tatsächlich zur Laufzeit von WordPress gehandhabt und nicht von TinyMCE.

Fügen Sie dies oben in Ihre Template- oder functions.php-Datei ein:

<?php remove_filter('the_content', 'wpautop'); ?>

Quelle:
http://wordpress.org/support/topic/stop-wordpress-from-addition-p-tags-and-removing-line-break

In Drupal wäre eine Art “klebriger” Weg, dies zu tun, hook_nodeapi() oder das/die d7-Äquivalent(e) zum Anzeigen von Knoten zu verwenden und einen regulären Ausdruck zu verwenden, um p-umbrochene Bilder zu ersetzen, die am Anfang des Felds stehen. Sie müssten Ihren Kunden darüber informieren, dass sie beim Bearbeiten nicht richtig aussehen würden, aber dass sie auf dem Display richtig erscheinen würden.

Wenn Sie nach einer CSS-Option suchen:

In css2 gibt es den :first-child-Selektor und in css3 gibt es auch den :only-child-Selektor. p:first-child img könnte mit negativen Rändern verwendet werden, um Ränder auszugleichen, die Sie für p-Elemente deklariert haben. Ein Nachteil wäre, dass dies auch die gleichen negativen Ränder für alle Bilder auferlegen würde, die der Kunde in einen ersten Absatz einfügen könnte. css3 wird möglicherweise nicht in allen Browsern unterstützt, die Sie abdecken möchten, aber wenn Sie es verwenden können, können Sie den Selektor :only-child für Bilder verwenden, die die einzigen untergeordneten Elemente von p-Elementen sind, und die Ränder des übergeordneten p mit negativen Rändern ausgleichen.

Wenn Javascript eine Option ist, können Sie jQuery verwenden, um die img Geschwister sein von p. So etwas (ungetestet)

$("p > img").each(function () {
  var $this = $(this);
  var $p= $this.parent();
  $p.before($this);
});

Fügen Sie Logik nur zu den Absätzen/Bildern hinzu, die Sie wirklich brauchen.

Hässlich, ja, aber eine praktikable Lösung als letztes Mittel.

Fügen Sie diese Zeile hinzu:

theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"

Wenn Sie ein img select div einfügen möchten:

<div>
    <img src="https://stackoverflow.com/questions/5819956/my_img.jpg>
</div>

Keine Notwendigkeit, etwas mit CSS zu ändern.

TinyMCE 4 verpackt alles in Blockelemente. Der Standard-Wrapper ist P. Klicken Sie auf das Bild und wählen Sie ein anderes Wrapper-Element wie DIV. Um DIV zum Menü hinzuzufügen, fügen Sie dies hinzu Funktionen.php:

function make_mce_awesome( $init ) {
  $init['block_formats'] = "Paragraph=p; Heading 1=h1; Heading 3=h3; Heading 2=h2; Preformatted=pre; Media=div";
return $init;
}

add_filter('tiny_mce_before_init', __NAMESPACE__ . "\\make_mce_awesome");