Wordpress Visual Editor Suppression des modifications HTML

8

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?

mcographie
la source
Pour commencer, les ellipses ...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 la imgrègle de TinyMCE - cela ne fait rien pour votre spanproblè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.
bosco
En particulier, la valid_elementsdocumentation relative aux options devrait vous aider à comprendre ce que vous devriez être passer à l' extended_valid_elementsoption. Je n'ai pas lu les documents, mais cela ressemblera probablement à"span[class|id|title|style]"
bosco
Merci. Je ne connais pas Javascript, j'ai donc supposé que l'extrait de code fonctionnerait. Ma faute.
mcography
1
Aucune infraction, mais vous ne devriez vraiment, vraiment pas utiliser de code que vous ne comprenez pas. C'est le rêve d'un hacker, non? Demandez à un utilisateur d'installer du code (qui se trouve être malveillant).
s_ha_dum
Après quelques recherches, ce problème semble être un peu plus complexe que je ne le pensais au départ. J'ajouterai mes conclusions et toutes les solutions / solutions plus tard dans la journée. À part: @s_ha_dum soulève un point très valable. Si vous prévoyez de passer du temps à peaufiner / développer sur / pour WordPress à quelque titre que ce soit, vous devriez passer un peu de temps à vous familiariser avec ses technologies fondamentales - même une compréhension de base peut vous aider à dépanner et à poser de bonnes questions, sans parler de la sécurisation de votre site.
bosco

Réponses:

8

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 onglets Visualet l' Textéditeur. Le problème est inhérent aux fonctionnalités de base (à partir de la version trunk 4.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é comme wont-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 :

L'élément HTML est un conteneur générique en ligne pour le contenu de phrasé, qui ne représente rien en soi. Il peut être utilisé pour regrouper des éléments à des fins de style (à l'aide des attributs class ou id) ou parce qu'ils partagent des valeurs d'attribut, telles que lang. Il ne doit être utilisé que si aucun autre élément sémantique n'est approprié.

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_initavec un filtre, mais spanle 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'écran

Les 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 :

.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);
}

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' altattribut sur <img>:

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

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 invisible

Pour é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' &nbsp;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">&nbsp;</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 &shy;. À la différence &nbsp;, 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">&shy;</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.

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

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.

bosco
la source
Merci mille fois, @boscho! J'apprécie vraiment que vous preniez le temps de m'aider. Je dois vous déconnecter maintenant, mais je vais examiner vos suggestions plus tard ce soir.
mcography
<i> les éléments sont également supprimés. Semble que seuls ne sont pas dépouillés.
EHerman
@EHerman Je viens de réaliser quelques expériences, et chaque 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 les iéléments vides ?
bosco
Une autre méthode pour contourner ce problème serait de créer un shortcode qui insère l'icône dans le contenu. Quelque chose comme [icon class = shield]. Cela rend l'icône également modifiable lors de l'utilisation de l'éditeur visuel.
HU ist Sebastian
1
Une autre alternative consiste à mettre un commentaire HTML dans l'élément span comme <span class="icon-shield"><!-- icon --></span>. Cela ne prend pas d'espace comme le &nbsp;fait et empêche TinyMCE de supprimer l'élément.
j08691