it-swarm.com.de

Der TinyMCE-Editor bricht mein schönes HTML

Dies ist so ziemlich ein genaues Duplikat von: Wie kann man Wordpress und TinyMCE dazu bringen, <a> -Tags zu akzeptieren, die Elemente auf Blockebene umbrechen, wie dies in HTML5 zulässig ist? und HTML5-, WordPress- und Tiny MCE-Ausgabe - das Umschließen von Anker-Tags um div führt zu einer funky Ausgabe

Mein Problem ist, dass die vorgeschlagene Lösung (tiny_mce_before_init filter) mein Problem nicht zu lösen scheint. Ich habe HTML, das so aussieht:

<a href="#">
    <img src="path/to/file.jpg" />
    <p>Some amazing descriptive text</p>
</a>

Das ist in HTML5 völlig legal. Der WP -Editor mag es jedoch nicht und wandelt es in Folgendes um:

<a href="#">
    <img src="path/to/file.jpg" />
</a>
<p>Some amazing descriptive text</p>

Das bricht natürlich mein Layout. Kennt jemand einen Weg, wie ich dieses Verhalten verhindern kann? Ich kann die Visual Komponente des Editors nicht aufgeben und mich an einfachen Text halten. Anregungen sind willkommen.

Um klar zu sein, wenn ich den folgenden Code verwende ( hier vorgeschlagen ), dürfen die <p>-Tags in den Ankern bleiben, aber es wird viel zusätzlicher Speicherplatz hinzugefügt, zusammen mit einer &nbsp;-Entität, die sich bei jedem Wechsel multipliziert Visueller und Text-Modus.

add_filter('tiny_mce_before_init', 'modify_valid_children');

function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
9
Dominic P

Unabhängig davon, was Sie als gültige untergeordnete Elemente konfiguriert haben, behandelt Wordpress p-Tags sowie Zeilenumbrüche auf einzigartige Weise. Sie werden wahrscheinlich feststellen, dass beim Wechsel vom Texteditor zum visuellen Editor und zurück Ihre <p> -Tags entfernt werden, ähnlich wie im Frontend. Eine Möglichkeit, dies zu verhindern, besteht darin, den <p>-Tags eine benutzerdefinierte Klasse zuzuweisen.

<p class="text">This p tag won't get removed"</p>.

Während dieses verhindert, dass Ihr p-Tag entfernt wird, behebt es Ihr Problem nicht, da Ihr Markup im Frontend immer noch durcheinander gerät. Sie können wpautop deaktivieren. Wenn Sie dies tun UND p in gültigen untergeordneten Elementen enthalten haben, wird dieses IHR PROBLEM BEHEBEN.

OPTION 1: Autop deaktivieren und gültige untergeordnete Elemente festlegen

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

Ich sollte Sie jedoch warnen, dass Ihr HTML-Code in der Sekunde, in der Sie vom HTML -Editor zurück zu TinyMCE wechseln, zerstört wird. Eine Problemumgehung besteht darin, TinyMCE für bestimmte Beitragstypen wie in Option 2 unten zu deaktivieren.


OPTION 2: Deaktiviere Auto P, TinyMCE und setze gültige Kinder

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup');
function disable_wyswyg_to_preserve_my_markup( $default ){
  if( get_post_type() === 'post') return false;
  return $default;
}

Für die meisten Leute ist dieses jedoch keine Option.


Welche anderen Optionen gibt es? Eine Problemumgehung, die mir aufgefallen ist, besteht darin, ein span-Tag mit einer Klasse zu verwenden und sicherzustellen, dass kein Leerzeichen zwischen Ihren HTML-Tags vorhanden ist. In diesem Fall können Sie die obige Option verwenden und müssen TinyMCE nicht alle gleichzeitig deaktivieren. Denken Sie daran, dass Sie Ihrem Stylesheet auch CSS hinzufügen müssen, um den Bereich korrekt anzuzeigen.

OPTION 3: Option 1 + gestaltete Span-Tags

HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Some amazing descriptive text</span></a>

CSS in Stylesheet

.noautop {
    display: block;
}

Option 4: Verwenden des integrierten Media Uploader-Shortcodes

 shortcode media uploader 

Ich habe dies ursprünglich vergessen, aber der [caption] shortcode sieht folgendermaßen aus:

[caption id="attachment_167" align="alignnone" width="169"]
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    awesome caption
[/caption]

Die Ausgabe sieht folgendermaßen aus:

<figure id="attachment_167" style="width: 169px" class="wp-caption alignnone">
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    <figcaption class="wp-caption-text">Some amazing descriptive text</figcaption>
</figure>

Wenn Sie keine Figuren-Tags möchten, können Sie ein Plugin wie Shortcode für benutzerdefinierten Inhalt verwenden, mit dem Sie dies tun können:

[raw] <p>this content will not get filtered by wordpress</p> [/raw]

Warum kann der Editor nicht einfach so arbeiten, wie ich es will?

Ich habe in den letzten Jahren unzählige Stunden damit verbracht, dies zum Laufen zu bringen. Gelegentlich werde ich eine Lösung finden, die perfekt funktioniert, aber dann wird Wordpress ein Update veröffentlichen, das alles wieder durcheinander bringt. Die einzige Lösung, die ich jemals gefunden habe, um vollständig so zu funktionieren, wie es sollte, führt mich zu der besten Antwort, die ich habe.

Option 5: Erhaltenes HTML-Editor-Markup Plus

Also ersparen Sie sich die Kopfschmerzen und machen Sie einfach mit. Standardmäßig wirkt sich Preserved HTML Editor Markup Plus nur auf neue Seiten aus. Wenn Sie bereits erstellte Seiten ändern möchten, müssen Sie zu www.example.com/wp-admin/options-writing.php gehen und die Plugin-Einstellungen bearbeiten. Sie können auch das Standardverhalten für Zeilenumbrüche ändern.

Hinweis: Wenn Sie sich für diese Option entscheiden, überprüfen Sie den Support-Thread, wenn ein neues WordPress-Update gestartet wird. Gelegentlich führt eine Änderung zu Problemen. Stellen Sie daher am besten sicher, dass das Plugin auf den neueren Versionen funktioniert.


Extra-Guthaben: Debuggen Ihres Problems/Bearbeiten anderer Tinymce-Optionen

Wenn Sie Ihre TINYMCE-Konfigurationen wie bei Filtern manuell überprüfen und einfach bearbeiten möchten, können Sie advanced tinymce config installieren. Hier können Sie ALLE der konfigurierten TINYMCE-Optionen anzeigen und über eine einfache Oberfläche bearbeiten. Sie können auch wie bei den Filtern neue Optionen hinzufügen. Es macht die Dinge viel einfacher zu verstehen.

Zum Beispiel habe ich beides und Preserved HTML Editor Markup Plus. Der Screenshot unten zeigt die Admin-Seite von Advanced Tinymce Config. Während der Screenshot 90% des tatsächlichen Inhalts abschneidet, können Sie sehen, dass die gültigen untergeordneten Elemente zum Bearbeiten verfügbar sind und welche Preserved HTML Editor Markup Plus hinzugefügt wurden.

 tinymce editor 

Dies ist eine äußerst hilfreiche Methode, um nicht nur Ihren Editor vollständig anzupassen, sondern auch zu sehen, was gerade passiert. Vielleicht können Sie sogar herausfinden, was Ihr Problem verursacht hat. Nachdem ich mir die Parameter angesehen habe, während das Markup für den beibehaltenen HTML-Editor aktiviert war, sah ich einige zusätzliche Optionen, die einem benutzerdefinierten Filter hinzugefügt werden konnten.

function fix_tiny_mce_before_init( $in ) {

    // You can actually debug this without actually needing Advanced Tinymce Config enabled:
    // print_r( $in );
    // exit();

  $in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    $in[ 'force_p_newlines' ] = FALSE;
    $in[ 'remove_linebreaks' ] = FALSE;
    $in[ 'force_br_newlines' ] = FALSE;
    $in[ 'remove_trailing_nbsp' ] = FALSE;
    $in[ 'apply_source_formatting' ] = FALSE;
    $in[ 'convert_newlines_to_brs' ] = FALSE;
    $in[ 'verify_html' ] = FALSE;
    $in[ 'remove_redundant_brs' ] = FALSE;
    $in[ 'validate_children' ] = FALSE;
    $in[ 'forced_root_block' ]= FALSE;

    return $in;
}
add_filter( 'tiny_mce_before_init', 'fix_tiny_mce_before_init' );

Leider hat diese Methode nicht funktioniert. Möglicherweise tritt beim Aktualisieren des Posts und/oder beim Wechseln zwischen den Editoren etwas Regex oder Javascript auf. Wenn Sie sich den Preserved HTML Editor-Quellcode ansehen, können Sie feststellen, dass er auf der Administratorseite JavaScript-Probleme verursacht. Mein letzter Rat wäre also, zu prüfen, wie das Plugin funktioniert ob Sie diese Funktionalität hinzufügen möchten in Ihrem Thema.

Wie auch immer, tut mir leid für jeden, der in meiner Antwort so weit gekommen ist. Ich dachte nur, ich würde meine eigenen Erfahrungen mit dem WordPress-Editor teilen, damit andere hoffentlich nicht stundenlang versuchen müssen, das herauszufinden, wie ich es getan habe!

16
Bryan Willis