Wordpress Visual Editor Entfernen von HTML-Änderungen

8

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?

mcography
quelle
Für den Anfang sind Ellipsen ...kein gültiges Javascript und werden häufig verwendet, um das Auslassen von Inhalten anzuzeigen. In diesem Fall glaube ich, dass der Autor des Dokuments beabsichtigt hat, dass Sie Ihre eigene TinyMCE-Konfiguration bereitstellen, in der die Auslassungspunkte vorhanden sind. Darüber hinaus haben Sie den Standardwert aus den Dokumenten verwendet, der ausdrücklich angibt, dass er die TinyMCE- imgRegel ersetzt. Dies hat nichts mit Ihrem spanProblem zu tun . Je mehr Forschungsaufwand Sie anzeigen, desto besser ist die Chance, eine gültige Antwort zu erhalten. Bitte verbringen Sie mehr Zeit mit den TinyMCE-Dokumenten.
Bosco
Insbesondere die valid_elementsOption Dokumentation sollten Sie helfen , herauszufinden , was Sie sollten zu dem werden , vorbei extended_valid_elementsOption. Ich habe die Dokumente nicht gelesen, aber es wird wahrscheinlich ziemlich ähnlich aussehen wie"span[class|id|title|style]"
Bosco
Vielen Dank. Ich kenne Javascript nicht, also habe ich einfach angenommen, dass das Snippet funktionieren würde. Mein Fehler.
mcography
1
Nichts für ungut, aber Sie sollten wirklich keinen Code verwenden, den Sie nicht verstehen. Das ist der Traum eines Hackers, nicht wahr? Lassen Sie einen Benutzer Code installieren (der zufällig böswillig ist).
s_ha_dum
Nach einigen Recherchen scheint dieses Problem etwas komplexer zu sein, als ich ursprünglich gedacht hatte. Ich werde meine Ergebnisse und alle Problemumgehungen / Lösungen später heute hinzufügen. Nebenbei: @s_ha_dum bringt einen sehr gültigen Punkt vor. Wenn Sie vorhaben, einige Zeit mit dem Optimieren / Entwickeln von / für WordPress in irgendeiner Form zu verbringen, sollten Sie sich mit den grundlegenden Technologien vertraut machen - selbst ein grundlegendes Verständnis kann Ihnen bei der Fehlerbehebung und beim Stellen guter Fragen helfen. Ganz zu schweigen von der Sicherheit Ihrer Website.
Bosco

Antworten:

8

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 &nbsp;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 &shy;. Im Gegensatz dazu &nbsp;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.

Bosco
quelle
Vielen Dank, @boscho! Ich weiß es wirklich zu schätzen, dass Sie sich die Zeit genommen haben, mir zu helfen. Ich muss mich jetzt abmelden, aber ich werde Ihre Vorschläge später heute Abend prüfen.
Mcography
<i> Elemente werden ebenfalls entfernt. Scheint nur nicht abgestreift zu sein.
EHerman
@EHerman Ich habe gerade einige Experimente durchgeführt und jedes leere iElement bis auf das einfachste <i></i>wurde im Verlauf der Erstellung und anschließenden Änderung eines neuen Posts beibehalten - keines wurde aus dem Inhalt entfernt. Ich kann ein solches Verhalten auch nicht in der Kerncodebasis identifizieren. Könnten Sie einen Anwendungsfall für das Entfernen leerer iElemente durch WordPress bereitstellen ?
Bosco
Eine andere Methode, um dies zu umgehen, besteht darin, einen Shortcode zu erstellen, der das Symbol in den Inhalt einfügt. So etwas wie [icon class = Schild]. Dadurch kann das Symbol auch mit dem visuellen Editor bearbeitet werden.
HU ist Sebastian
1
Eine andere Alternative besteht darin, einen HTML-Kommentar in das span-Element wie einzufügen <span class="icon-shield"><!-- icon --></span>. Dies nimmt keinen Platz ein &nbsp;und verhindert, dass TinyMCE das Element entfernt.
j08691