CKEditor 4.4.6 DEV中jQuery加载MathJax公式异常求助

你遇到的核心问题很明确：直接通过jQuery操作CKEditor的iframe DOM插入内容，既绕过了CKEditor的内部处理流程，又没触发MathJax对新内容的重新渲染。页面刷新时MathJax会自动扫描整个页面的公式，但动态插入内容后它不会主动检测DOM变化，所以公式无法正常显示。

下面给你两种解决方案，优先推荐第一种符合CKEditor规范的做法：

方案一：使用CKEditor官方API设置内容（推荐） #

CKEditor提供了专门的setData()方法来更新编辑器内容，这个方法会正确维护编辑器的内部状态，之后我们只需要手动触发MathJax对编辑器区域的重新渲染即可：

// 获取CKEditor实例
const editor = CKEDITOR.instances.editor1;
// 使用setData设置内容，在回调中触发MathJax渲染
editor.setData('你的带MathJax公式的内容，比如$(x = {-b \pm \sqrt{b^2-4ac} \over 2a})$', function() {
    // 内容加载完成后，让MathJax重新渲染编辑器的可编辑区域
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, editor.editable().$]);
});

方案二：如果必须用jQuery操作DOM（不推荐） #

如果你因为特殊需求一定要直接操作iframe的DOM，那在插入内容后必须手动通知MathJax去处理这个新的DOM区域：

// 用jQuery插入内容到iframe的body
$('#cke_editor1 iframe').contents().find('body').html('你的带MathJax公式的内容');
// 手动触发MathJax渲染该iframe的body区域
MathJax.Hub.Queue(["Typeset", MathJax.Hub, $('#cke_editor1 iframe').contents().find('body')[0]]);

补充说明 #

1. 为什么直接操作iframe会失效？
   • CKEditor有自己的内容解析和状态管理逻辑，直接修改iframe的DOM会导致编辑器内部状态与实际DOM不一致，可能引发其他潜在问题；
   • MathJax默认仅在页面加载时扫描一次内容，动态插入的新公式不会被自动检测到，必须手动触发渲染。
2. 你的CKEditor版本是4.4.6 DEV（比较老旧），对应的MathJax应该是基于MathJax.Hub的版本，上面的代码完全适配这个环境。如果后续升级MathJax到v3+，渲染方法会变为MathJax.typeset([元素])，但当前环境用MathJax.Hub.Queue是正确的。

内容的提问来源于stack exchange，提问作者gowthami