Javascript 动态呈现mathjax

我想用MathJax显示公式，并用CKEditor编辑它们。但是，当我从编辑模式切换到显示模式时，公式显示为空白（最初和在编辑模式下正确显示）。我已经能够将其简化为一个小的JSFIDLE：

复制它的步骤：

输入。查看公式如何正确显示

单击编辑按钮并单击文本中的某个位置。您将能够以TeX和周围文本编辑公式。注意：我在JSFIDLE中使用的CDN没有数学公式插件，但是它不会影响行为

在显示矩形中的任意空白处单击以隐藏CKEditor实例

现在您可以单击“保存”按钮。如您所见，公式不再显示

但是，如果您检查元素，您将看到步骤1中的初始代码与此步骤之后的初始代码是如何相同的，但现在没有显示

HTML代码：

<div id = "fullarticle" contenteditable = "false">
    <p>Some text</p>
    <span class = "math-tex">
        \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
    </span>
    <p>Some more text</p>
</div>
<button class = "edit">Edit</button>
<button class = "save">Save</button>

编辑：

---

经过一些测试后，我可以确认这与我混合了CKEditor和MathJax这一事实有关，因为在本期中无法看到？你可以看到一个演示。您会发现，在contenteditable中嵌入MathJax之类的东西是非常棘手的，因此我不建议您自己尝试实现它。

我已经成功了。显然是某种时间/订单问题：

新的Javascript：

$(".edit").click(function(){
  $(".math-tex").each(function(index){
    $(this).html("\\(" + $(this).find("script").html() + "\\)");
    });
  $("#fullarticle").attr("contenteditable", "true");
  CKEDITOR.inline('fullarticle');
  });

$(".save").click(function(){
  $("#fullarticle").attr("contenteditable", "false");

  for(k in CKEDITOR.instances) {
    var instance = CKEDITOR.instances[k];
    instance.destroy();
    }

  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  });

---

但是，您不能多次编辑/保存。试试看，连续第二次按“编辑”时，它将显示非常糟糕。

是的，问题是我还需要MathJax作为一个独立的工具，以便在未加载CKEditor时使用（无编辑的正常渲染）。我已经可以正常工作并保存到数据库中，唯一的问题是在通过ajax保存数据后再次显示公式（因为它不能正确呈现，因此我提出了问题）。我没有看到问题-CKEditor生成MathJax理解的输出，因此当您加载它时，它会正确解析。是的，没错，CKEditor生成MathJax理解的输出。当重新加载页面时，我对此没有问题。然而，我发现了两个问题。首先，当CKEditor尝试从MathJax加载数据时（尝试删除第二行并使用“edit”和“save”进行多次迭代）。显然，MathJax每次呈现时都会吃掉父元素。第二个问题是我的问题中最初显示的问题。不过，这似乎是一个时间问题，所以这里没有问题。我正在关注您的答案，但还有另一个问题，比如存储的Mathjax方程无法在CKEditor 4中再次加载。你也在我的一个[关于Mathjax和CKEditor4的问题]（）@NullPointer中发表了评论，这个问题与你遇到的问题是相同（或类似）的吗？这个问题也出现在我的答案中（正如您在JSFIDLE中看到的），但我接受了它，因为它修复了原始问题。我对您接受的答案并不怀疑。我刚才提到我有类似的问题，你也在我的问题中评论了你的建议。所以我想知道你对我的问题有什么具体的解决办法。这就是我的朋友。事实上，你的

编辑代码对我很有帮助，所以请竖起大拇指。
$(".edit").click(function(){
  $(".math-tex").each(function(index){
    $(this).html("\\(" + $(this).find("script").html() + "\\)");
    });
  $("#fullarticle").attr("contenteditable", "true");
  CKEDITOR.inline('fullarticle');
  });

$(".save").click(function(){
  $("#fullarticle").attr("contenteditable", "false");

  for(k in CKEDITOR.instances) {
    var instance = CKEDITOR.instances[k];
    instance.destroy();
    }

  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  });