如何讓W(xué)ordPress編輯器支持內(nèi)聯(lián)SVG代碼，wordpresssvg

WordPress編輯器對(duì)SVG的支持一向是非常的不友好，首先它不能上傳SVG文件，也不能自動(dòng)的嵌入到內(nèi)容中讓它正常顯示。同時(shí)，對(duì)內(nèi)聯(lián)SVG代碼根本不識(shí)別，會(huì)無(wú)情的將SVG代碼自動(dòng)刪除。

在上一篇文章中我介紹了如何讓W(xué)ordpress支持上傳SVG圖片的方法，似乎是部分的解決了這個(gè)問(wèn)題。最近在開(kāi)發(fā)過(guò)程中遇到了大量的需要在Wordpress可視化編輯器里使用內(nèi)聯(lián)SVG(inline SVG)代碼的情況。

相信你也知道，Wordpress使用的是TinyMCE編輯器，而TinyMCE編輯器僅對(duì)標(biāo)準(zhǔn)的HTML5標(biāo)記進(jìn)行支持，SVG代碼一律不識(shí)別，當(dāng)我在Wordpress的編輯器了“可視化”和“文本”兩個(gè)標(biāo)簽間切換時(shí)，所有的SVG代碼都被干凈的刪除。

網(wǎng)上有很多關(guān)于如何讓W(xué)ordpress的TinyMCE支持SVG的討論，在TinyMCE官方網(wǎng)站也找到了配置TinyMCE擴(kuò)展標(biāo)記的文檔。主要是三個(gè)配置點(diǎn)：extended_valid_elements，custom_elements和valid_children。下面是網(wǎng)上拷貝的一段網(wǎng)友提供的配置Wordpress編輯器的代碼：

add_filter('tiny_mce_before_init', 'vsl2014_filter_tiny_mce_before_init'<span>);
</span><span>function</span> vsl2014_filter_tiny_mce_before_init( <span>$options</span><span> ) {

    </span><span>if</span> ( ! <span>isset</span>( <span>$options</span>['extended_valid_elements'<span>] ) ) {
        </span><span>$options</span>['extended_valid_elements'] = 'svg'<span>;
    } </span><span>else</span><span> {
        </span><span>$options</span>['extended_valid_elements'] .= ',svg'<span>;
    }

    </span><span>if</span> ( ! <span>isset</span>( <span>$options</span>['valid_children'<span>] ) ) {
        </span><span>$options</span>['valid_children'] = '+body[svg]'<span>;
    } </span><span>else</span><span> {
        </span><span>$options</span>['valid_children'] .= ',+body[svg]'<span>;
    }

    </span><span>if</span> ( ! <span>isset</span>( <span>$options</span>['custom_elements'<span>] ) ) {
        </span><span>$options</span>['custom_elements'] = 'svg'<span>;
    } </span><span>else</span><span> {
        </span><span>$options</span>['custom_elements'] .= ',svg'<span>;
    }

    </span><span>return</span> <span>$options</span><span>;
}</span>

還有網(wǎng)友認(rèn)為下面這樣就可以了：

<span>function</span> override_mce_options(<span>$initArray</span><span>) {
    </span><span>$opts</span> = '*[*]'<span>;
    </span><span>$initArray</span>['valid_elements'] = <span>$opts</span><span>;
    </span><span>$initArray</span>['extended_valid_elements'] = <span>$opts</span><span>;
    </span><span>return</span> <span>$initArray</span><span>;
}
add_filter(</span>'tiny_mce_before_init', 'override_mce_options');

還有網(wǎng)友給出了下面的建議：

上面的這些建議單獨(dú)使用似乎都不成功，但每種建議都似乎能解決一部分問(wèn)題。經(jīng)過(guò)反復(fù)的實(shí)驗(yàn)，我最終找到了下面的方法，能成功的讓SVG在Wordpress的TinyMCE編輯器里不被刪除，而且保存良好的格式。

首先在function.php里加入下面的PHP代碼：

<span>/*</span><span>*
 * Add to extended_valid_elements for TinyMCE
 *
 * @param $init assoc. array of TinyMCE options
 * @return $init the changed assoc. array
 </span><span>*/</span>
<span>function</span> my_change_mce_options( <span>$init</span><span> ) {

    </span><span>$ext</span> = '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[*]'<span>;

    </span><span>//</span><span> Add to extended_valid_elements if it alreay exists</span>
    
    <span>if</span> ( <span>isset</span>( <span>$init</span>['extended_valid_elements'<span>] ) ) {
        </span><span>$init</span>['extended_valid_elements'] .= ',' . <span>$ext</span><span>;
    } </span><span>else</span><span> {
        </span><span>$init</span>['extended_valid_elements'] = <span>$ext</span><span>;
    }

    </span><span>//</span><span> Super important: return $init!</span>
    <span>return</span> <span>$init</span><span>;
}

add_filter(</span>'tiny_mce_before_init', 'my_change_mce_options');

在上面的Wordpress過(guò)濾器里，我將所有的SVG標(biāo)記元素都添加了上去(至于用通配符’*[*]’的方法，我沒(méi)有實(shí)驗(yàn)過(guò)，有興趣的朋友可以試試，歡迎給出反饋。)

細(xì)心的朋友可能觀察到，上面的SVG標(biāo)記名稱全都改成了小寫。而很顯然SVG官方規(guī)范里規(guī)定SVG標(biāo)記名稱的大小寫是有意義的。但我實(shí)驗(yàn)過(guò)，使用駝峰式的SVG標(biāo)記名稱是不行的?？赡苁荋TML代碼并不在意大小寫的原因。

第二，在Wordpress的TinyMCE編輯器里，將所有的SVG代碼都用

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

<span><</span><span>svg</span><span>></span>

    <span><</span><span>rect</span><span>></span> ... <span></</span><span>rect</span><span>></span><span>

    抱歉，你的瀏覽器不支持SVG
</span><span></</span><span>svg</span><span>></span>

實(shí)施了上面的方法后，我現(xiàn)在使用Wordpress的TinyMCE編輯器，在嵌入SVG代碼后，就像跟寫入普通html代碼一樣，不會(huì)被刪除和情況。我并沒(méi)有深入的研究TinyMCE編輯器對(duì)SVG代碼的處理機(jī)制，上面的這些方法也只是治標(biāo)不治本。也許隨著Wordpress的升級(jí)或TinyMCE升級(jí)，這些方法會(huì)失效。

如果你有更巧的方法，請(qǐng)?jiān)谠u(píng)論里分享，謝謝！

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

相關(guān)閱讀：

讓W(xué)ordpress支持上傳SVG圖片

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

SVG里的幾個(gè)動(dòng)畫元素的用法介紹