如何让WordPress编辑器支持内联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\');

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

1. TinyMCE删除SVG代码的原因是认为<svg>是空标记，所以，应该在<svg>代码里放入一点东西，比如 &nbsp;，或一句“抱歉，你的浏览器不支持SVG”(在支持SVG的浏览器里这句话是不显示的。)
2. 应该给SVG标签上添加一个id属性。
3. 将SVG代码放入<pre>内

上面的这些建议单独使用似乎都不成功，但每种建议都似乎能解决一部分问题。经过反复的实验，我最终找到了下面的方法，能成功的让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[*],foreign [*],g[*],glyph[*],glyphref[*],hkern[*],line[*],marker[*],mask[*], data[*],missing-glyph[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialgradient[*],rect[*], [*],set[*],stop[*],lineargradient[*],style[*],svg[*],switch[*],symbol[*],text[*],textpath[*], [*],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代码都用<pre></pre>包裹起来，这样，TinyMCE编辑器就能保持SVG代码的原有缩进格式。

第三，在<svg></svg>代码里放入一点东西，比如 &nbsp;，或一句“抱歉，你的浏览器不支持SVG”：

<svg>

	<rect> ... </rect>

	抱歉，你的浏览器不支持SVG
</svg>

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

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