将 MathJax 插入 ContentEditable div答案

【问题标题】：Inserting MathJax into ContentEditable div将 MathJax 插入 ContentEditable div
【发布时间】：2012-10-16 21:49:14
【问题描述】：

我正在尝试将一些 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']);

});

这可以渲染，但是一旦插入，元素就会冻结并且无法进一步输入。有人可以在这里指出问题吗？

【问题讨论】：

未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 了解迁移提示。

标签： contenteditable mathjax

【解决方案1】：

您需要在内容更改时调用 MathJax。请参阅这个小提琴：http://jsfiddle.net/rfq8po3a/（注意，我必须在 html 中转义 < 和 >）。

这是通过几件事实现的：

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

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

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

【讨论】：

我才意识到这是一个很老的问题；我希望有人仍然觉得我的回答有用！
我很想学习如何做到这一点。不过，您的 jsfiddle 对我不起作用。我想办法把原来的乳胶放回去，这样它就可以以其原生形式进行编辑。有什么建议吗？