Question

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

JSFiddle

重现它的步骤：

输入JSFiddle。了解公式的正确显示方式。
点击编辑按钮和文本中的某个位置。您将能够在TeX和周围文本中编辑公式。注意：我正在使用没有数学公式插件的jsfiddle 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>

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

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

Answer 2

你看到了Mathjax plugin吗？您可以看到演示here。正如您所知，将MathJax这样的东西嵌入到可信的内容中是非常棘手的，因此我不建议您自己尝试实现它。

动态渲染mathjax

2 个答案: