分享W3C技术,精读代码,交流技术。实力来源于基础知识的积累。

当前位置: 主页 > HELEY笔记 > WordPress > 笔记内容

让WordPress编辑器支持内联SVG代码

来源:www.198541.com????作者:HELEY????点击:31992 次
分享到:
WordPress编辑器对SVG的支持一向是非常的不友好,首先它不能上传SVG文件,也不能自动的嵌入到内容中让它正常显示。同时,对内联SVG代码根本不识别,会无情的将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标签上添加一个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升级,这些方法会失效。
(责任编辑:heley)
转载请注明:www.198541.com > 让WordPress编辑器支持内联SVG代码
198541.COM提供的内容仅用于自我技能提升。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
当使用本站时,代表您已接受了本站的使用条款和隐私条款。版权所有,保留一切权利。
Copyright ? 2013-2016 分享W3C技术,精读代码,交流技术。实力来源于基础知识的积累。 198541.com All Rights Reserved. 备案号:沪ICP备13009586号-1