解决WordPress文章编辑页面自动添加audio代码问题

猪小侠源码 www.yqym.net

问题的出现

近日，笔者两个基于 wordpress 建设的网站，因为坚持日更，每天在编辑文章的时候，发现一个奇怪的问题：就是在编辑文章的时候如果在文章编辑页面由可视化变为文本编辑模式的时，在文章末尾会自动添加 html 代码，添加的代码如下：

<audio style="display: none;" controls="controls"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></audio>

或者是

<audio style="display: none;" controls="controls"></audio>

切换几次就会添加几次。导致文章发布后，文章末尾有时候会有很大一部分空白。开始笔者并没有在意，以为是 wordpress 编辑器本身的功能，为了美观，笔者只有切换到文本模式手动删除自动添加的 html 代码。问题如图所示：

问题的进展

11 月 1 日，笔者心血来潮，对网站进行百度 MIP 页面改造，安装好插件之后，兴致勃勃的浏览 MIP 页面效果，这下把笔者惹毛了，MIP 页面文章底部赫然出现音频播放界面，试着点击提示：错误，发生未知错误。如下图所示：

这就奇怪了，记得文章明明没有添加类似的代码，怎么会出现这个音频播放界面呢？于是进入 WordPress 后台，查看相关文章，在文本模式下竟然发现文章末尾有<audio style="display: none;" controls="controls"></audio>这行代码。在浏览器查看该文章显示是正常的，查看源代码，的确有这行代码，如图红色箭头部位：

问题的分析

出现这个奇怪的问题后，笔者想到了肯定有是编辑文章的时候，自动添加的代码搞的鬼，但是仔细排查之后并未发现问题的端倪，作为不懂代码的门外汉，实在也不知道怎么处理这个问题。于是在懿古今主题交流群（477678587）发布了这个问题，寻求群主古今大侠和网友的帮助。

古今大侠很热心的帮助我一起分析该问题，并提出 4 个建议

是否安装插件导致

是否修改主题导致

是否上传图片方式导致

是否最新 wordpress 版本

在古今大侠的帮助下，一起对该问题进行详细的排查，然而问题就如臭虫般讨厌，无法找到踪迹，就算百度搜索也没有关于该问题的蛛丝马迹。最后古今大侠担心是 wordpress 程序本身的问题，他在本地进行了测试，发现从可视化变为文本编辑模式并不会出现笔者所述的情况。

于是笔者也试着在本地全新安装 4.9.8 版本 wordpress，心想这下该可以发现问题了吧。不曾想，点击写文章，从可视化转文本模式后，该死的代码又自动添加了。天啊，救救我吧，要崩溃了！

问题的解决

正当笔者陷入深深的烦恼之中后，古今大侠的一句话提醒了笔者，他说：“换个浏览器试试。”虽然心想这个跟浏览器会有什么关系呢？难不成浏览器还会自动添加代码不成？但是，还是醍醐灌顶，似乎想到了一个可能性：会不会是因为笔者用的 Chrome 浏览器插件导致该问题呢？

笔者检查了一下谷歌浏览器，发现就安装了“有道词典 Chrome 划词插件”，可是这个插件我已经关闭了划词翻译功能的呀，不管了先把该插件卸载试试。

奇迹出现了，卸载掉“有道词典 Chrome 划词插件”后，再进入本地测试，发现文章编辑界面不会再自动插入该代码了。笔者立刻又进入网站后台进行测试，发现问题真的解决了。烦人的 Bug 臭虫消失了，哇哈哈！！！再也不用手动去删除这该死的自动添加的代码了。

结语

很奇怪的 wordpress 编辑器自动添加<audio style="display: none;" controls="controls"></audio>代码的问题，笔者使用 wordpress 近八年了第一次碰到，在古今大侠的帮助下，最终解决了该问题。再次感谢古今大侠的热心帮助，也希望能给碰到类似问题的朋友一些帮助。

猪小侠源码 www.yqym.net