WordPress編輯器對SVG的支持一向是非常的不友好，首先它不能上傳SVG文件，也不能自動的嵌入到內容中讓它正常顯示。同時，對內聯SVG代碼根本不識別，會無情的將SVG代碼自動刪除。

在上一篇文章中我介紹了如何讓Wordpress支持上傳SVG圖片的方法，似乎是部分的解決了這個問題。最近在開發“Web學習手冊(http://know.xyhtml5.com)”過程中遇到了大量的需要在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');

還有網友給出了下面的建議：

TinyMCE刪除SVG代碼的原因是認為是空標記，所以，應該在代碼里放入一點東西，比如 ?，或一句“抱歉，你的瀏覽器不支持SVG”(在支持SVG的瀏覽器里這句話是不顯示的。)

應該給SVG標簽上添加一個id屬性。

將SVG代碼放入

內

上面的這些建議單獨使用似乎都不成功，但每種建議都似乎能解決一部分問題。經過反復的實驗，我最終找到了下面的方法，能成功的讓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代碼都用

包裹起來，這樣，TinyMCE編輯器就能保持SVG代碼的原有縮進格式。

第三，在代碼里放入一點東西，比如 ?，或一句“抱歉，你的瀏覽器不支持SVG”：

...

抱歉，你的瀏覽器不支持SVG

實施了上面的方法后，我現在使用Wordpress的TinyMCE編輯器，在嵌入SVG代碼后，就像跟寫入普通html代碼一樣，不會被刪除和情況。我并沒有深入的研究TinyMCE編輯器對SVG代碼的處理機制，上面的這些方法也只是治標不治本。也許隨著Wordpress的升級或TinyMCE升級，這些方法會失效。

如果你有更巧的方法，請在評論里分享，謝謝！

總結

以上是生活随笔為你收集整理的html5 svg 实现编辑器,如何让WordPress编辑器支持内联SVG代码？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。