Tiny MCE editor stripping xlink:href parameter from SVG USE tag

I have an inline SVG tag with an embedded tag.

HTML:

My Account

I have created a filter function to force the Tiny MCE editor to leave SVG tags alone. The code was adapted from post: use of tag into wordpress.

Filter function:

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

I adapted the posted solution to add SVG CLASS, the USE tag and its XLINK:HREF, X and Y parameters.

Problem is the xlink:href parameter is being miss-interpreted resulting in code butchery upon switching to VISUAL mode in the editor.

HTML before switch to visual mode:

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

HTML after switch to visual mode:

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

I have tried escaping the colon in the xlink:href function parameter like this: xlink:href, tried an encoded value for the colon like this: xlink%3Ahref and using quotes around it like this “xlink:href” but all failed.

I know you can embed svg using HTML5 markup, but I would like to try this method if I can get a solution that sticks.

Read more here:: Tiny MCE editor stripping xlink:href parameter from SVG USE tag

Leave a Reply

Your email address will not be published. Required fields are marked *