javascript - 动态渲染 mathjax

Question

我想用 MathJax 显示公式并用 CKEditor 的 Mathematical Formulas 编辑它们.但是，当我从编辑模式切换到显示模式时，公式显示为空白(最初是在编辑模式下正确显示)。我已经能够将它缩减为一个小的 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 这一事实有关，因为在 this fiddle 中看不到问题。

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

但是，您不能多次编辑/保存。试一试，连续第二次按编辑会显示很差。