最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
让WordPress编辑器支持内联SVG代码
时间：2022-06-25 18:42:08 编辑：袖梨 来源：一聚教程网
WordPress编辑器对SVG的支持一向是非常的不友好，首先它不能上传SVG文件，也不能自动的嵌入到内容中让它正常显示。同时，对内联SVG代码根本不识别，会无情的将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代码的原因是认为
首先在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升级，这些方法会失效。
相关文章
- 王者荣耀侦探能力大测试攻略 王者荣耀侦探能力大测试怎么过 11-22
- 无期迷途主线前瞻兑换码是什么 11-22
- 原神欧洛伦怎么培养 11-22
- 炉石传说网易云音乐联动怎么玩 11-22
- 永劫无间手游确幸转盘怎么样 11-22
- 无期迷途主线前瞻兑换码是什么 无期迷途主线前瞻直播兑换码介绍 11-22