动态渲染 mathjax

Question

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

JSFiddle

重现它的步骤：

1. 输入JSFiddle。查看公式如何正确显示。
2. 单击Edit按钮和文本中的某处。您将能够在 TeX 和周围文本中编辑公式。注意：我在 jsfiddle 中使用没有数学公式插件的 CDN，但它不会影响行为。
3. 单击显示矩形中的空白处以隐藏 CKEditor 实例。
4. 现在您可以单击该Save按钮。如您所见，公式不再显示。

但是，如果您检查元素，您将看到步骤 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>

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(){
  var mytext = CKEDITOR.instances.fullarticle.getData();
  $("#fullarticle").html(mytext).attr("contenteditable", "false");
  MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  for(k in CKEDITOR.instances) {
    var instance = CKEDITOR.instances[k];
    instance.destroy();
    }
  });

编辑：

经过一些测试，我可以确认这与我正在混合 CKEditor 和 MathJax 的事实有关，因为在这个小提琴中看不到问题。

Answer 1

我成功了。显然是某种时间/顺序问题：

JSFiddle

新的 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]);
  });

但是，您不能多次编辑/保存。尝试一下，连续第二次按编辑它会显示得非常糟糕。