it-swarm.com.de

Wordpress Visual Editor HTML-Änderungen entfernen

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

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

wechseln Sie zum visuellen Editor und dann zurück zum HTML-Editor. Die Symbole werden ausgeblendet. Ich versuche, dieses Bit von Javascript einzuschließen, um dies zu beheben. Ich habe mir wp_enqueue_scripts angeschaut und dies in functions.php eingetragen, aber das Problem ist immer noch nicht behoben.

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?

8
mcography

Hintergrund

In diesem Problem geht es darum, leere <span></span> -Elemente in TinyMCE zu entfernen, wenn Sie einen Beitrag speichern oder zwischen den Registerkarten Visual und Text wechseln. Das Problem liegt in der Kernfunktionalität (ab Amtsleitungsversion 4.0-alpha-20140602) und kann nicht über die Standard-WordPress-APIs geändert werden, wie in ticket # 26986 erwähnt. Das Ticket enthält die Gründe für die Einstellung und ist als wont-fix gekennzeichnet. Dies bedeutet, dass Ihre beste Wette 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 eliminieren, die nichts bewirken.

Aus den <span>-Dokumenten von MDN :

Das HTML-Element ist ein generischer Inline-Container für die Formulierung 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 gemeinsam haben, z. B. lang. Es sollte nur verwendet werden, wenn kein anderes semantisches Element geeignet ist.

Da <span> Inline-Elemente/-Inhalte gruppieren soll, haben die WordPress-Mitwirkenden entschieden, dass das Element irrelevant sein muss, wenn das Tag leer ist, und es daher aus dem Inhalt entfernt.


Work-Arounds

Die Konfiguration von TinyMCE lässt sich zum größten Teil mit hook in tiny_mce_before_init mit einem Filter ändern. Das Leerentfernungsverhalten von span kann jedoch nicht auf diese Weise geändert werden. Um dies zu tun, sind wahrscheinlich Hacks für Kerndateien erforderlich, und als solche habe ich keine solchen Lösungen zur Prüfung bereitgestellt.

Ideal: Geben Sie <span> Screen Reader Text ein

Screenreader sind Software-Teile, die versuchen, Bildschirminhalte zu interpretieren, um Sehbehinderten zu helfen. 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 ob sie sichtbar wären. Web-Entwickler nutzen dieses Verhalten traditionell im Namen der Barrierefreiheit aus, indem sie eine CSS-Klasse erstellen, die auf Elemente angewendet werden kann, die sie vor allen Benutzern verbergen, für die CSS aktiviert ist, irgendetwas im Sinne 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 Ihres Symbolbereichs einen zweiten "Screenreader" -Bereich hinzufügen, der auf dem Bildschirm jedoch nicht gerendert wird (oder zumindest so scheint) bietet Screenreadern eine barrierefreie Alternative zu Ihrem Symbol, ähnlich wie das Attribut alt für einen <img> funktioniert:

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

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

Gib <span> Unsichtbaren Inhalt

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

  • Das Hinzufügen eines Leerzeichens zwischen dem öffnenden und dem schließenden Tag ist ausreichend. Da jedoch leere Leerzeichen entfernt werden, müssen Sie das Zeichen über die HTML-Entität &nbsp; hinzufügen. Dieses Zeichen wird so konvertiert, dass es ein normales Leerzeichen ist, wenn Sie die Tabulatoren wechseln oder speichern. Es wird jedoch nicht aus dem Markup entfernt. Beachten Sie, dass sich dies auf die Größe Ihres Bereichs auswirken 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 &shy; einen "Bindestrich" verwenden. Im Gegensatz zu &nbsp; wird das Soft-Hypen-Zeichen so gerendert, als würde es keinen Platz beanspruchen und die Größe Ihres Bereichs 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 existieren können. In den Kommentaren von ticket # 26986 empfiehlt TobiasBg die Verwendung von <i> (<em>, <b> und <strong> sind einige andere Möglichkeiten). Weitere Informationen zur Verwendung von <i> für Symbole finden Sie unter this Stack Overflow question .

<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 Belieben zu konfigurieren (über die von WordPress zur Verfügung gestellten Optionen hinaus) und den Standardeditor zu ersetzen (oder ihn auszublenden und eine Ersatz-Metabox hinzuzufügen). Während Sie das Entfernen leerer Bereiche deaktivieren können, wird der Zeitaufwand für die Ausarbeitung einer solchen Implementierung wahrscheinlich den Vorteil bei weitem überwiegen.

8
bosco