Question

我正在尝试将一些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，但是一旦插入，元素就会冻结，无法进一步输入。有人可以在这里指出问题。

Answer 1

您需要在内容更改时调用MathJax。看到这个小提琴：http://jsfiddle.net/rfq8po3a/（注意，我必须逃避html中的<和>。

这是通过以下几点实现的：

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

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

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

将MathJax插入ContentEditable div

1 个答案: