web-dev-qa-db-fra.com

Un petit éditeur MCE supprimant le paramètre xlink: href de la balise SVG USE

J'ai une balise SVG en ligne avec une balise <USE> incorporée.

HTML: 

<ul>
   <li><svg class="icon-user"><use xlink:href="#icon-user"></use></svg> My Account</li>
</ul>

J'ai créé une fonction de filtre pour forcer l'éditeur Tiny MCE à laisser les tags SVG seuls. Le code a été adapté de post: utilisation de la balise <svg> en wordpress .

Fonction de filtrage: 

add_filter( 'tiny_mce_before_init', 'fb_tinymce_add_pre' );
function fb_tinymce_add_pre( $initArray ) {

   // Command separated string of extended elements
   $ext = 'svg[preserveAspectRatio|class|style|version|viewbox|xmlns],defs,use[xlink:href|x|y],linearGradient[id|x1|y1|z1]';

    if ( isset( $initArray['extended_valid_elements'] ) ) {
        $initArray['extended_valid_elements'] .= ',' . $ext;
    } else {
        $initArray['extended_valid_elements'] = $ext;
    }
    // maybe; set tiny paramter verify_html
    //$initArray['verify_html'] = false;

    return $initArray;
}

J'ai adapté la solution publiée pour ajouter SVG CLASS, la balise USE et ses paramètres XLINK: HREF, X et Y.

Le problème est que le paramètre xlink: href est mal interprété, ce qui entraîne une boucherie du code lors du passage au mode VISUAL dans l'éditeur.

HTML avant de passer en mode visuel: 

     <svg class="icon-user"><use xlink:href="#icon-user"></use></svg>

HTML après passage en mode visuel: 

     <svg class="icon-user"><use xlink="href"></use></svg>

J'ai essayé d'échapper aux deux points dans le paramètre de fonction xlink:href comme ceci: xlink\:href, j'ai essayé d'utiliser une valeur codée pour les deux points comme ceci: xlink%3Ahref et d'utiliser des guillemets comme ceci, mais "xlink:href" mais tous ont échoué.

Je sais que vous pouvez intégrer svg à l'aide du balisage HTML5, mais j'aimerais essayer cette méthode si je peux obtenir une solution qui colle.

filterstinymcevisual-editorsvg
3
Kathryn Wilson

Malheureusement, le côlon est un caractère de contrôle TinyMCE

Force l'attribut à la valeur spécifiée. Par exemple, 'border: 0'

... d'où le passage à xlink=href. La seule solution apparente est le caractère générique use[*]

Utilisez le caractère de contrôle ? qui "sépare les valeurs de vérification d'attribut", c'est-à-dire use[xlink?href]

1
TheDeadMedic