it-swarm.com.de

Winziger MCE-Editor, der xlink: href-Parameter vom SVG USE-Tag entfernt

Ich habe ein Inline-SVG-Tag mit einem eingebetteten <USE> -Tag.

HTML:

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

Ich habe eine Filterfunktion erstellt, um den Tiny MCE-Editor zu zwingen, SVG-Tags in Ruhe zu lassen. Der Code wurde von post angepasst: Verwendung von <svg> -Tag in WordPress .

Filterfunktion:

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

Ich habe die veröffentlichte Lösung angepasst, um SVG CLASS, das USE-Tag und dessen XLINK: HREF-, X- und Y-Parameter hinzuzufügen.

Problem ist, dass der Parameter xlink: href falsch interpretiert wird, was beim Wechsel in den VISUAL-Modus im Editor zu Code-Metzgerei führt.

HTML vor dem Wechsel in den visuellen Modus:

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

HTML nach dem Wechsel in den visuellen Modus:

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

Ich habe versucht, den Doppelpunkt im Funktionsparameter xlink:href wie folgt zu maskieren: xlink\:href, habe einen codierten Wert für den Doppelpunkt wie folgt ausprobiert: xlink%3Ahref und Anführungszeichen wie diesen "xlink:href" verwendet, aber alle sind fehlgeschlagen.

Ich weiß, dass Sie Svg mit HTML5-Markup einbetten können, aber ich würde diese Methode gerne ausprobieren, wenn ich eine Lösung finden kann, die hält.

3
Kathryn Wilson

Leider ist der Doppelpunkt ein TinyMCE-Steuerzeichen

Erzwingt das Attribut auf den angegebenen Wert. Zum Beispiel 'border: 0'

... daher der Wechsel zu xlink=hrefDie einzig offensichtliche Lösung ist der Platzhalter use[*]

Verwenden Sie das Steuerzeichen ?, das "Attributprüfwerte trennt", d. H. use[xlink?href]

1
TheDeadMedic