web-dev-qa-db-ja.com

SVG USEタグからxlink：hrefパラメータを削除する小型MCEエディタ

埋め込みの<USE>タグを含むインラインSVGタグがあります。

HTML： 

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

私はTiny MCEエディタにSVGタグだけを残すように強制するためのフィルタ関数を作成しました。コードはpost： wordpressへの<svg>タグの使用から変更されました 。

フィルタ関数： 

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

私はSVGクラス、USEタグとそのXLINKを追加するために投稿されたソリューションを修正しました：HREF、XとYパラメータ。

問題は、xlink：hrefパラメータが誤って解釈され、エディタでVISUALモードに切り替えるとコードが破損することです。

ビジュアルモードに切り替える前のHTML： 

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

ビジュアルモードに切り替えた後のHTML： 

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

xlink:href関数パラメータでコロンをエスケープしようとしました：xlink\:href、コロンのエンコード値を次のように試してみました：xlink%3Ahrefそしてそれを囲む引用符をこの"xlink:href"のように使用して失敗しました。

私はあなたがHTML5マークアップを使ってsvgを埋め込むことができることを知っています、しかし私が固執する解決策を得ることができるなら私はこの方法を試してみたいと思います。

filterstinymcevisual-editorsvg
3
Kathryn Wilson

残念ながらコロンは TinyMCE制御文字です

属性を指定の値に強制します。たとえば、 'border：0'です。

...それゆえxlink=hrefへの切り替え。 唯一の明らかな解決策はワイルドカードuse[*]です

「属性検証値を区切る」という制御文字?を使用します。すなわちuse[xlink?href]

1
TheDeadMedic