Lorsque j'utilise l'éditeur HTML WordPress pour ajouter des icônes icomoon comme ceci:
<span class="icon-shield"></span>
puis passez à l'éditeur visuel, puis revenez à l'éditeur HTML, les icônes disparaissent. J'essaie d'inclure ce morceau de Javascript pour résoudre ce problème. J'ai regardé wp_enqueue_scripts et l'ai mis dans functions.php, mais cela ne résout toujours pas le problème.
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' );
Comment puis-je réparer cela?
php
javascript
tinymce
visual-editor
html-editor
mcographie
la source
la source
...
ne sont pas du Javascript valide et sont fréquemment utilisées pour indiquer l'omission de contenu. Dans ce cas, je crois que l'auteur du document vous a fourni la configuration de votre propre TinyMCE où les points de suspension sont présents. De plus, vous avez utilisé la valeur par défaut des documents qui indique explicitement qu'elle remplace laimg
règle de TinyMCE - cela ne fait rien pour votrespan
problème. Vous avez plus de chances de recevoir une réponse valide si vous effectuez plus d'efforts de recherche - veuillez passer plus de temps avec les documents TinyMCE.valid_elements
documentation relative aux options devrait vous aider à comprendre ce que vous devriez être passer à l'extended_valid_elements
option. Je n'ai pas lu les documents, mais cela ressemblera probablement à"span[class|id|title|style]"
Réponses:
Contexte
Ce problème concerne la suppression des
<span></span>
éléments vides dans TinyMCE lors de l'enregistrement d'une publication ou du basculement entre les ongletsVisual
et l'Text
éditeur. Le problème est inhérent aux fonctionnalités de base (à partir de la version trunk4.0-alpha-20140602
) et est immuable via les API WordPress standard, comme mentionné dans le ticket # 26986 . Le ticket détaille le raisonnement derrière le paramètre et est marqué commewont-fix
, ce qui signifie que votre meilleur pari est l'un des «contournements» répertoriés ci-dessous.Comportement WordPress / TinyMCE par défaut
Par défaut, l'instance TinyMCE de WordPress est configurée de telle sorte qu'un certain nombre de balises vides ou de balises manquant de certains attributs sont supprimées afin d'éliminer le balisage qui ne fait rien.
À partir des
<span>
documents de MDN :Comme il
<span>
est prévu de regrouper les éléments / contenus en ligne, les principaux contributeurs de WordPress ont décidé que l'élément doit être hors de propos lorsque la balise est vide et donc la retirer du contenu.Solutions de contournement
Pour la plupart, la bonne façon de modifier la configuration de TinyMCE est de se connecter
tiny_mce_before_init
avec un filtre, maisspan
le comportement de suppression à vide ne peut pas être modifié de cette manière. Pour ce faire, il faut probablement des hacks dans les fichiers de base, et en tant que tel, je n'ai pas fourni de telles solutions pour examen.Idéal: donner du
<span>
texte au lecteur d'écranLes lecteurs d'écran sont des logiciels qui tentent d'interpréter le contenu à l'écran afin d'aider les malvoyants. Lors du traitement d'une page Web, la plupart des lecteurs d'écran désactivent entièrement CSS (et Javascript) ou ne traitent qu'un sous-ensemble, de sorte que les choses normalement cachées par CSS finiront par être traitées comme si elles étaient visibles. Les développeurs Web exploitent traditionnellement ce comportement au nom de l'accessibilité en créant une classe CSS qui peut être appliquée à des éléments qui les cacheront à tous ceux qui ont activé CSS, quelque chose comme :
Avec cette classe disponible (les feuilles de style de votre thème ont probablement une classe similaire), à l'intérieur de votre étendue d'icônes, vous pouvez ajouter une deuxième plage de "lecteur d'écran" qui ne sera pas (ou du moins semble être) rendue à l'écran mais fournira aux lecteurs d'écran une alternative accessible à votre icône, semblable au fonctionnement de l'
alt
attribut sur<img>
:Ce qui précède affichera votre icône lorsque CSS est activé, et les lecteurs d'écran interpréteront "Sécurité" à sa place.
Donner du
<span>
contenu invisiblePour éviter que les
<span>
s soient supprimés, vous pouvez ajouter du contenu qui n'est pas affiché explicitement:L'ajout d'un caractère espace entre les balises d'ouverture et de fermeture suffira. Cependant, comme les espaces vides sont supprimés, vous devez ajouter le caractère via l'
entité HTML. Ce caractère sera converti pour apparaître comme un espace normal une fois que vous aurez changé d'onglet ou enregistré, mais il ne sera pas supprimé du balisage. Notez que cela peut affecter la taille de votre étendue, tout comme si vous placiez une seule lettre dans l'élément:<span class="icon-shield"> </span>
En supposant que vous travaillez avec un jeu de caractères UTF-8, vous pouvez utiliser un caractère "trait d'union" via l'entité HTML
­
. À la différence
, le caractère soft-hypen est rendu comme s'il ne prend pas de place et ne devrait pas affecter la taille de votre span:<span class="icon-shield">­</span>
Utiliser un élément alternatif
Alors que TinyMCE de WordPress est configuré pour éliminer les
<span>
éléments vides , il existe un certain nombre d'autres balises qui sont configurées par défaut pour permettre d'exister sans contenu. Dans les commentaires du billet # 26986 , TobiasBg recommande d' utiliser<i>
(<em>
,<b>
et<strong>
quelques autres possibilités). Consultez cette question sur le dépassement de capacité pour en savoir plus sur la pratique de l'utilisation<i>
des icônes.Créez votre propre instance TinyMCE
C'est probablement la solution la plus compliquée et généralement absurde disponible, et en tant que telle, je ne fournirai pas d'implémentation. À l'aide d'un plugin, il devrait être possible de charger une instance distincte des scripts TinyMCE, de les configurer comme vous le souhaitez (au-delà des options exposées par WordPress) et de remplacer l'éditeur par défaut (ou de le masquer et d'ajouter une métabox de remplacement). Tout en vous permettant de désactiver la suppression des plages vides, le temps nécessaire pour étoffer une telle implémentation serait probablement largement supérieur à l'avantage.
la source
i
élément vide jusqu'au plus simple a<i></i>
été conservé au cours de la création d'un nouveau message et de sa modification ultérieure - aucun n'a été supprimé du contenu. Je ne peux pas non plus identifier un tel comportement dans la base de code principale. Pourriez-vous fournir un cas d'utilisation pour WordPress supprimer lesi
éléments vides ?<span class="icon-shield"><!-- icon --></span>
. Cela ne prend pas d'espace comme le
fait et empêche TinyMCE de supprimer l'élément.