web-dev-qa-db-fra.com

Wordpress Visual Editor annulant les modifications HTML

Lorsque j'utilise l'éditeur WordPress HTML pour ajouter des icônes icomoon telles que celles-ci:

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

puis passez à l'éditeur visuel, puis à l'éditeur HTML, les icônes disparaissent. J'essaie d'inclure ce peu 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?

phpjavascripttinymcevisual-editorhtml-editor
8
mcography

Contexte

Ce problème concerne la suppression des éléments <span></span> vides dans TinyMCE lors de l’enregistrement d’une publication ou du basculement entre les onglets de l’éditeur Visual et Text. Le problème est inhérent aux fonctionnalités de base (à partir de la version de la corbeille 4.0-alpha-20140602) et ne peut pas être modifié via les API WordPress standard, comme indiqué dans ticket # 26986 . Le ticket détaille le raisonnement derrière le réglage et est marqué comme wont-fix, ce qui signifie que votre meilleur pari est l’un des "solutions de contournement" répertoriées ci-dessous.

Comportement par défaut de WordPress/TinyMCE

Par défaut, l'instance TinyMCE de WordPress est configurée de sorte qu'un certain nombre de balises vides ou de balises manquantes pour certains attributs soient supprimées afin d'essayer d'éliminer les balises qui ne font rien.

De les <span> docs du MDN :

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

Étant donné que <span> est destiné à regrouper des éléments/contenus en ligne, les principaux contributeurs de WordPress ont décidé que l'élément devait être sans importance lorsque la balise était vide et le supprimer du contenu.

Terrains de travail

Dans la plupart des cas, la bonne façon de modifier la configuration de TinyMCE consiste à accrocher le tiny_mce_before_init avec un filtre mais le comportement de suppression des vides de span ne peut pas être modifié de cette manière. Cela nécessite probablement des piratages dans les fichiers de base et, en tant que tel, je n’ai fourni aucune solution de ce type pour examen.

Idéal: donner <span> texte du 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 éléments normalement masqués par CSS finissent par être traités comme s'ils é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 aux éléments qui les masqueront pour tous ceux qui ont activé CSS, quelque chose dans le sens de :

.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 seconde "étendue d'écran" qui ne sera pas (ou du moins ne semblera pas l'être) affichée à l'écran, mais fournira aux lecteurs d'écran une alternative accessible à votre icône, similaire à la façon dont l'attribut alt fonctionne sur un <img>:

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

Ce qui précède affiche votre icône lorsque CSS est activé et les lecteurs d’écran interpréteront "Sécurité" à sa place.

Donnez <span> Contenu invisible

Pour éviter que le <span>s soit supprimé, vous pouvez ajouter du contenu qui n'est pas affiché explicitement:

  • L'ajout d'un espace entre les balises d'ouverture et de fermeture suffit. Toutefois, à mesure que les espaces vides sont supprimés, vous devez ajouter le caractère via l'entité HTML &nbsp;. Ce caractère sera converti pour apparaître comme un espace normal une fois que vous avez basculé ou sauvegardé, mais il ne sera pas supprimé du balisage. Notez que cela peut affecter la taille de votre étendue, comme si vous ne placiez qu'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 "soft-tiret" via l'entité HTML &shy;. Contrairement à &nbsp;, le caractère soft-hypen est rendu comme s'il ne prenait aucun espace et ne devrait pas affecter la taille de votre étendue:

    <span class="icon-shield">&shy;</span>

Utiliser un élément alternatif

TinyMCE de WordPress est configuré pour supprimer les éléments <span> vides, mais un certain nombre d'autres balises sont configurées par défaut pour autoriser les éléments existants sans contenu. Dans les commentaires de ticket # 26986 , , TobiasBg recommande d'utiliser <i> (<em>, <b> et <strong> sont quelques autres possibilités). Voir cette question de débordement de pile pour plus d’informations sur la pratique consistant à utiliser <i> pour les icônes.

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

Créez votre propre instance TinyMCE

Il s’agit probablement de la solution la plus compliquée et la plus absurde disponible à ce jour. C’est pourquoi je ne fournirai aucune mise en oeuvre. À l'aide d'un plugin, il devrait être possible de charger une instance distincte des scripts TinyMCE, de les configurer à votre guise (au-delà des options proposées par WordPress) et de remplacer l'éditeur par défaut (ou de le masquer et d'ajouter un metabox de remplacement). Tout en vous permettant de désactiver la suppression des étendues vides, le temps requis pour étoffer une telle implémentation dépasserait probablement largement les avantages.

8
bosco