Wordpress Visual Editor Entfernen von HTML-Änderungen

Wenn ich den WordPress-HTML-Editor verwende, um folgende icomoon-Symbole hinzuzufügen:

<span class="icon-shield"></span>

Wechseln Sie dann zum visuellen Editor und dann zurück zum HTML-Editor. Die Symbole verschwinden. Ich versuche, dieses bisschen Javascript einzuschließen , um dies zu beheben. Ich habe mir wp_enqueue_scripts angesehen und dies in functions.php eingefügt, aber es behebt das Problem immer noch nicht.

function oakwood_tinymcefix() {
    wp_enqueue_script( 'tiny_mce' );
    echo '<script type="text/javascript">'
   , 'tinymce.init({
            ...
            extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
        });'
   , '</script>';
}
add_action( 'admin_enqueue_scripts', 'oakwood_tinymcefix' );

Wie kann ich das beheben?

Hintergrund

In diesem Problem geht es um das Entfernen leerer <span></span>Elemente in TinyMCE beim Speichern eines Posts oder beim Wechseln zwischen den Registerkarten Visualund der TextRegisterkarte Editor. Das Problem liegt in der Kernfunktionalität (ab Trunk-Version 4.0-alpha-20140602) und kann über die Standard-WordPress-APIs nicht geändert werden , wie in Ticket Nr. 26986 erwähnt . Das Ticket enthält die Gründe für die Einstellung und ist mit gekennzeichnet. wont-fixDies bedeutet, dass Ihre beste Wahl eine der unten aufgeführten "Problemumgehungen" ist.

Standardverhalten von WordPress / TinyMCE

Standardmäßig ist die TinyMCE-Instanz von WordPress so konfiguriert, dass eine Reihe leerer Tags oder Tags, denen bestimmte Attribute fehlen, entfernt werden, um Markups zu entfernen, die nichts bewirken.

Aus den <span>Dokumenten von MDN :

Das HTML-Element ist ein generischer Inline-Container zum Phrasieren von Inhalten, der von Natur aus nichts darstellt. Es kann verwendet werden, um Elemente für Stilzwecke (unter Verwendung der Klassen- oder ID-Attribute) zu gruppieren oder weil sie Attributwerte wie lang gemeinsam nutzen. Es sollte nur verwendet werden, wenn kein anderes semantisches Element geeignet ist.

Wie <span>zu Gruppe Inline - Elemente / content gedacht ist, haben die Wordkerne Beiträger entschieden , dass das Element irrelevant sein muss , wenn der Tag leer ist , und es somit aus dem Inhalt abzuzustreifen.

Workarounds

In den meisten Fällen ist die richtige Art und Weise TinyMCE Konfiguration zu modifizieren , um Haken in tiny_mce_before_initmit einem Filter , jedoch spanist leer Entfernungsverhalten auf diese Weise nicht geändert werden können. Um dies zu tun, sind wahrscheinlich Hacks für Kerndateien erforderlich, und als solche habe ich keine derartigen Lösungen zur Prüfung bereitgestellt.

Ideal: Geben Sie <span>Screen Reader Text

Screenreader sind Software-Teile, die versuchen, Bildschirminhalte zu interpretieren, um Sehbehinderte zu unterstützen. Bei der Verarbeitung einer Webseite deaktivieren die meisten Screenreader entweder CSS (und Javascript) vollständig oder verarbeiten nur eine Teilmenge, sodass Dinge, die normalerweise von CSS verborgen werden, so verarbeitet werden, als wären sie sichtbar. Web-Entwickler ausnutzen traditionell dieses Verhalten im Namen der Zugänglichkeit durch eine CSS - Klasse erstellen , die auf Elemente angewandt werden können , die sie von jedem verstecken , die CSS aktiviert ist , etwas entlang der Linien von :

.screen-reader-text {
    position: absolute !important;
    height: 1px;
    width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Wenn diese Klasse verfügbar ist (die Stylesheets Ihres Themas haben wahrscheinlich eine ähnliche Klasse), können Sie innerhalb Ihrer Symbolspanne eine zweite "Bildschirmlese" -Spanne hinzufügen, die jedoch nicht auf dem Bildschirm gerendert wird (oder zumindest zu sein scheint) bietet Bildschirmleseprogrammen eine zugängliche Alternative zu Ihrem Symbol, ähnlich wie das altAttribut auf einem <img>:

<span class="icon-shield"><span class="screen-reader-text">Security</span></span>

Oben wird Ihr Symbol angezeigt, wenn CSS aktiviert ist, und Bildschirmleser interpretieren an seiner Stelle "Sicherheit".

Gib <span>unsichtbaren Inhalt

Um zu verhindern, dass das <span>s entfernt wird, können Sie Inhalte hinzufügen, die nicht explizit angezeigt werden:

• Das Hinzufügen eines Leerzeichens zwischen dem öffnenden und dem schließenden Tag reicht aus. Wenn jedoch leere Leerzeichen entfernt werden, müssen Sie das Zeichen über die  HTML-Entität hinzufügen . Dieses Zeichen wird so konvertiert, dass es nach dem Wechseln der Tabulatoren oder dem Speichern als normales Leerzeichen erscheint. Es wird jedoch nicht aus dem Markup entfernt. Beachten Sie, dass dies die Größe Ihrer Spanne beeinflussen kann, genau wie wenn Sie einen einzelnen Buchstaben in das Element einfügen würden:

  <span class="icon-shield">&nbsp;</span>

• Angenommen, Sie arbeiten mit einem UTF-8-Zeichensatz, können Sie über die HTML-Entität einen "weichen Bindestrich" verwenden ­. Im Gegensatz dazu  wird der Soft-Hypen-Charakter so gerendert, als würde er keinen Platz beanspruchen und sollte die Größe Ihrer Spanne nicht beeinflussen:

  <span class="icon-shield">&shy;</span>

Verwenden Sie ein alternatives Element

Während TinyMCE von WordPress so konfiguriert ist, dass leere <span>Elemente entfernt werden, gibt es eine Reihe anderer Tags, die standardmäßig so konfiguriert sind, dass sie ohne Inhalt vorhanden sind. In den Kommentaren des Ticket # 26986 , empfiehlt die Verwendung von TobiasBg<i> ( <em>, <b>und <strong>gibt ein paar andere Möglichkeiten). Weitere Informationen zur Verwendung <i>von Symbolen finden Sie in dieser Frage zum Stapelüberlauf.

<i class="icon-shield"></i>

Erstellen Sie Ihre eigene TinyMCE-Instanz

Dies ist wahrscheinlich die komplizierteste und allgemein absurdeste verfügbare Lösung, und als solche werde ich keine Implementierung bereitstellen. Mit einem Plugin sollte es möglich sein, eine separate Instanz der TinyMCE-Skripte zu laden, sie nach Ihren Wünschen zu konfigurieren (über die von WordPress bereitgestellten Optionen hinaus) und den Standardeditor zu ersetzen (oder ihn auszublenden und eine Ersatzmetabox hinzuzufügen). Während Sie das Entfernen leerer Bereiche deaktivieren können, würde der Zeitaufwand für die Ausarbeitung einer solchen Implementierung den Vorteil wahrscheinlich erheblich überwiegen.