Heim >php教程 >php手册 >如何让WordPress编辑器支持内联SVG代码,wordpresssvg

如何让WordPress编辑器支持内联SVG代码,wordpresssvg

WBOY
WBOYOriginal
2016-06-13 08:43:031484Durchsuche

如何让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'<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>

还有网友认为下面这样就可以了:

<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');

还有网友给出了下面的建议:

上面的这些建议单独使用似乎都不成功,但每种建议都似乎能解决一部分问题。经过反复的实验,我最终找到了下面的方法,能成功的让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过滤器里,我将所有的SVG标记元素都添加了上去(至于用通配符’*[*]’的方法,我没有实验过,有兴趣的朋友可以试试,欢迎给出反馈。)

细心的朋友可能观察到,上面的SVG标记名称全都改成了小写。而很显然SVG官方规范里规定SVG标记名称的大小写是有意义的。但我实验过,使用驼峰式的SVG标记名称是不行的。可能是HTML代码并不在意大小写的原因。

第二,在Wordpress的TinyMCE编辑器里,将所有的SVG代码都用

包裹起来,这样,TinyMCE编辑器就能保持SVG代码的原有缩进格式。

第三,在代码里放入一点东西,比如  ,或一句“抱歉,你的浏览器不支持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>

实施了上面的方法后,我现在使用Wordpress的TinyMCE编辑器,在嵌入SVG代码后,就像跟写入普通html代码一样,不会被删除和情况。我并没有深入的研究TinyMCE编辑器对SVG代码的处理机制,上面的这些方法也只是治标不治本。也许随着Wordpress的升级或TinyMCE升级,这些方法会失效。

如果你有更巧的方法,请在评论里分享,谢谢!

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

相关阅读:

让Wordpress支持上传SVG图片

WordPress中wp_title()函数的使用方法详解

SVG里的几个动画元素的用法介绍

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn