在CKEditor中输入内容后自动插入异常代码的问题求助

算力阿峰

2026-7-9

代码含义与问题解决

一、自动插入的代码含义

你看到的核心代码是：

<div class="bootstrapiso notranslate" data-html="true" data-original-title="" id="mttContainer" title="">&nbsp;</div>

各部分作用：

bootstrapiso：与Bootstrap布局适配的自定义样式类，通常来自编辑器或第三方插件的样式体系；
notranslate：标记该区域不被翻译工具（如Google翻译）处理；
data-html="true"：Bootstrap Tooltip/Popover的专属属性，表明该元素的提示内容支持HTML格式；
id="mttContainer"：唯一标识，大概率是某个缩写为MTT的功能（比如Markdown Tooltip、自定义内容工具）的容器；
 ：非换行空格，用于占位，避免空div被浏览器压缩或样式异常。
外层的<p><code>...</code></p>如果是实际插入的内容，说明这段div代码被以代码块形式渲染到了文章里，而非作为页面元素生效。

排查编辑器：检查你使用的文章编辑器（如CKEditor、TinyMCE、古腾堡等）的插件/扩展，搜索mttContainer或bootstrapiso相关选项，这类插入通常是编辑器的内容增强插件（比如tooltip工具、代码辅助插件）导致的；
检查主题与自定义脚本：在网站主题的JS/CSS文件中搜索mttContainer关键词，看是否有自动插入该元素的脚本逻辑；
排查第三方插件：逐个禁用网站的第三方插件（如内容优化、评论插件），测试每次更新文章是否还会插入代码，找到对应的插件。

编辑器插件问题：找到对应插件后，在编辑器设置中关闭“自动插入tooltip容器”或类似功能；如果是编辑器内置功能，可修改编辑器配置（比如CKEditor的config.removePlugins）移除相关插件；
主题/自定义脚本问题：找到插入这段代码的JS函数，注释或删除对应的插入代码；
第三方插件问题：关闭插件的自动插入设置，或替换为无此问题的同类插件。

重复插入的原因是插入逻辑没有判断元素是否已存在，解决方式：

自定义脚本修改：如果是自己写的插入逻辑，添加判断：
```
if (!document.getElementById('mttContainer')) {
  // 原插入代码
}
```
插件/编辑器问题：优先更新插件到最新版本，看是否修复了重复插入的bug；如果没有，可手动修改插件代码，加入上述存在性判断逻辑。

如果暂时找不到来源，可通过以下方式快速处理：

CSS隐藏：在网站全局样式中添加：

#mttContainer { display: none !important; }

JS去重：在页面加载后执行脚本，移除重复元素：

const containers = document.querySelectorAll('#mttContainer');
for (let i = 1; i < containers.length; i++) {
  containers[i].remove();
}

内容的提问来源于stack exchange，提问作者Hasan Köroğlu