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?
php
javascript
tinymce
visual-editor
html-editor
mcography
quelle
quelle
...
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-img
Regel ersetzt. Dies hat nichts mit Ihremspan
Problem 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.valid_elements
Option Dokumentation sollten Sie helfen , herauszufinden , was Sie sollten zu dem werden , vorbeiextended_valid_elements
Option. Ich habe die Dokumente nicht gelesen, aber es wird wahrscheinlich ziemlich ähnlich aussehen wie"span[class|id|title|style]"
Antworten:
Hintergrund
In diesem Problem geht es um das Entfernen leerer
<span></span>
Elemente in TinyMCE beim Speichern eines Posts oder beim Wechseln zwischen den RegisterkartenVisual
und derText
Registerkarte Editor. Das Problem liegt in der Kernfunktionalität (ab Trunk-Version4.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-fix
Dies 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 :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_init
mit einem Filter , jedochspan
ist 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 TextScreenreader 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 :
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
alt
Attribut auf einem<img>
:Oben wird Ihr Symbol angezeigt, wenn CSS aktiviert ist, und Bildschirmleser interpretieren an seiner Stelle "Sicherheit".
Gib
<span>
unsichtbaren InhaltUm 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"> </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">­</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.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.
quelle
i
Element 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 leereri
Elemente durch WordPress bereitstellen ?<span class="icon-shield"><!-- icon --></span>
. Dies nimmt keinen Platz ein
und verhindert, dass TinyMCE das Element entfernt.