如何讓WordPress編輯器支援內聯SVG代碼，wordpresssvg_PHP教程

如何讓WordPress編輯器支援內聯SVG代碼，wordpresssvg

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代碼都用

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

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

<svg>    <rect> ... rect>    抱歉，你的瀏覽器不支援SVGsvg>

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

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

原文地址：http://www.manongjc.com/article/657.html

相關閱讀：

讓Wordpress支援上傳SVG圖片

WordPress中wp_title()函數的使用方法詳解

SVG裡的幾個動畫元素的用法介紹

http://www.bkjia.com/PHPjc/1116241.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1116241.htmlTechArticle如何讓WordPress編輯器支援內聯SVG代碼，wordpresssvg WordPress編輯器對SVG的支援一向是非常的不友好，首先它不能上傳SVG檔案，也不能自動的嵌入...

