WordPress編輯器對SVG的支持一向是非常的不友好，首先它不能上傳SVG文件，也不能自動的嵌入到內容中讓它正常顯示。同時，對內聯SVG代碼根本不識別，會無情的將SVG代碼自動刪除。 在上一篇文章中我介紹瞭如何讓Wordpress支持上傳SVG圖片的方法，似乎是部分的解決了這個問題。最近在開發過 ...
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');
還有網友給出了下麵的建議：
- TinyMCE刪除SVG代碼的原因是認為<svg>是空標記，所以，應該在<svg>代碼里放入一點東西，比如 ，或一句“抱歉，你的瀏覽器不支持SVG”(在支持SVG的瀏覽器里這句話是不顯示的。)
- 應該給SVG標簽上添加一個id屬性。
- 將SVG代碼放入<pre>內
上面的這些建議單獨使用似乎都不成功，但每種建議都似乎能解決一部分問題。經過反覆的實驗，我最終找到了下麵的方法，能成功的讓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
相關閱讀：
