动态渲染mathjax

Question

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

的jsfiddle

重现它的步骤：

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

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

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

Answer 2

你看到Mathjax插件了吗？ 你可以在这里看到demo。 你会发现，将MathJax这样的东西嵌入到contenteditable中是非常棘手的，因此我不建议你自己尝试实现它。