WordPress編輯器對SVG的支持一向是非常的不友好，首先它不能上傳SVG文件，也不能自動的嵌入到內容中讓它正常顯示。同時，對內聯SVG代碼根本不識別，會無情的將SVG代碼自動刪除。
在上一篇文章中我介紹了如何讓Wordpress支持上傳SVG圖片的方法，似乎是部分的解決了這個問題。最近在開發過程中遇到了大量的需要在Wordpress可視化編輯器裡使用內聯SVG(inline SVG)代碼的情況。
相信你也知道，Wordpress使用的是TinyMCE編輯器，而TinyMCE編輯器僅對標准的HTML5標記進行支持，SVG代碼一律不識別，當我在Wordpress的編輯器了“可視化”和“文本”兩個標簽間切換時，所有的SVG代碼都被干淨的刪除。
網上有很多關於如何讓Wordpress的TinyMCE支持SVG的討論，在TinyMCE官方網站也找到了配置TinyMCE擴展標記的文檔。主要是三個配置點：extended_valid_elements，custom_elements和valid_children。下面是網上拷貝的一段網友提供的配置Wordpress編輯器的代碼：
add_filter('tiny_mce_before_init', 'vsl2014_filter_tiny_mce_before_init');
function vsl2014_filter_tiny_mce_before_init( $options ) {
if ( ! isset( $options['extended_valid_elements'] ) ) {
$options['extended_valid_elements'] = 'svg';
} else {
$options['extended_valid_elements'] .= ',svg';
}
if ( ! isset( $options['valid_children'] ) ) {
$options['valid_children'] = '+body[svg]';
} else {
$options['valid_children'] .= ',+body[svg]';
}
if ( ! isset( $options['custom_elements'] ) ) {
$options['custom_elements'] = 'svg';
} else {
$options['custom_elements'] .= ',svg';
}
return $options;
}
還有網友認為下面這樣就可以了：
function override_mce_options($initArray) {
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
還有網友給出了下面的建議：
上面的這些建議單獨使用似乎都不成功，但每種建議都似乎能解決一部分問題。經過反復的實驗，我最終找到了下面的方法，能成功的讓SVG在Wordpress的TinyMCE編輯器裡不被刪除，而且保存良好的格式。
首先在function.php裡加入下面的PHP代碼：
/**
* Add to extended_valid_elements for TinyMCE
*
* @param $init assoc. array of TinyMCE options
* @return $init the changed assoc. array
*/
function my_change_mce_options( $init ) {
$ext = 'a[*],altglyph[*],altglyphdef[*],altglyphitem[*],animate[*],animatecolor[*],animatemotion[*],animatetransform[*],circle[*],clippath[*],color-profile[*],cursor[*],defs[*],desc[*],ellipse[*],feblend[*],fecolormatrix[*],fecomponenttransfer[*],fecomposite[*],feconvolvematrix[*],fediffuselighting[*],fedisplacementmap[*],fedistantlight[*],feflood[*],fefunca[*],fefuncb[*],fefuncg[*],fefuncr[*],fegaussianblur[*],feimage[*],femerge[*],femergenode[*],femorphology[*],feoffset[*],fepointlight[*],fespecularlighting[*],fespotlight[*],fetile[*],feturbulence[*],filter[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],foreignobject[*],g[*],glyph[*],glyphref[*],hkern[*],line[*],marker[*],mask[*],metadata[*],missing-glyph[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialgradient[*],rect[*],script[*],set[*],stop[*],lineargradient[*],style[*],svg[*],switch[*],symbol[*],text[*],textpath[*],title[*],tref[*],tspan[*],use[*],view[*],vkern[*]';
// Add to extended_valid_elements if it alreay exists
if ( isset( $init['extended_valid_elements'] ) ) {
$init['extended_valid_elements'] .= ',' . $ext;
} else {
$init['extended_valid_elements'] = $ext;
}
// Super important: return $init!
return $init;
}
add_filter('tiny_mce_before_init', 'my_change_mce_options');
在上面的Wordpress過濾器裡，我將所有的SVG標記元素都添加了上去(至於用通配符’*[*]’的方法，我沒有實驗過，有興趣的朋友可以試試，歡迎給出反饋。)
細心的朋友可能觀察到，上面的SVG標記名稱全都改成了小寫。而很顯然SVG官方規范裡規定SVG標記名稱的大小寫是有意義的。但我實驗過，使用駝峰式的SVG標記名稱是不行的。可能是HTML代碼並不在意大小寫的原因。
第二，在Wordpress的TinyMCE編輯器裡，將所有的SVG代碼都用<pre></pre>包裹起來，這樣，TinyMCE編輯器就能保持SVG代碼的原有縮進格式。
第三，在<svg></svg>代碼裡放入一點東西，比如 ，或一句“抱歉，你的浏覽器不支持SVG”：
<svg>
<rect> ... </rect>
抱歉，你的浏覽器不支持SVG
</svg>
實施了上面的方法後，我現在使用Wordpress的TinyMCE編輯器，在嵌入SVG代碼後，就像跟寫入普通html代碼一樣，不會被刪除和情況。我並沒有深入的研究TinyMCE編輯器對SVG代碼的處理機制，上面的這些方法也只是治標不治本。也許隨著Wordpress的升級或TinyMCE升級，這些方法會失效。
如果你有更巧的方法，請在評論裡分享，謝謝！
原文地址：http://www.manongjc.com/article/657.html
相關閱讀：
讓Wordpress支持上傳SVG圖片
WordPress中wp_title()函數的使用方法詳解
SVG裡的幾個動畫元素的用法介紹
