5

我正在尝试将一些 MathJax 代码插入 contentEditable div，如下所示：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
  <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">      </script>

</head>
<body>
  <div id="editor" contentEditable="true" style="width:400px;height:400px;">
 </div>

和 JS

$(document).ready(function () {

  $('#editor').focus();

  var code = "\\alpha";

  var html = '<span id="_math"><script type="math/tex;mode=in-line">'+ code +'</script></span>';

  document.execCommand('insertHTML', false, html);

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

});

哪个呈现OK，但是一旦插入，元素就会冻结并且无法进一步输入。有人可以在这里指出问题。

4

1 回答 1

1

当内容发生变化时，您需要调用 MathJax。看到这个小提琴： http: //jsfiddle.net/rfq8po3a/（注意，我不得不在html中转义<and ）。>

这是通过几件事实现的：

1) 将 MathJax 逻辑移到它自己的函数中，refreshMathJax这将重新填充标签和代码。

2）第一次加载页面时调用此函数，然后再次onBlur。

3）清除可编辑元素onFocus。没有这个，可编辑元素就不能被轻易地重用。您可以更改 onFocus 回调函数，以将 contentEditable html 替换为原始 LaTeX 内容。

于 2015-04-15T20:27:04.817 回答