使用 MathJax 时截断时的奇怪行为答案

【问题标题】：Strange behavior when truncating while using MathJax使用 MathJax 时截断时的奇怪行为
【发布时间】：2016-04-28 19:50:23
【问题描述】：

我为一个网站实现了 MathJax，我正在尝试实现的是将文本区域缩短到一定长度并使其可点击，然后在点击时加载更多内容。 MathJax 可以很好地加载截断的文本，但是当我单击文本以将其扩展到整个段落时，MathJax 会将初始缩短的数学附加到新呈现的整个段落的末尾。有人对这个有经验么？我假设它正在发生，因为截断的文本仍在队列中，因此在加载整个文本后仍会打印它，但我似乎无法弄清楚如何从队列中清除队列缩短的文本以获取它好好工作。任何帮助/建议将不胜感激！

这是我的代码的基础：

var showOnClick = function() {
        ctrl.showAll(!ctrl.showAll());
};

MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
return m('p.readable.pointer', {onclick: showOnClick},
          ctrl.showAll() ? result.description : description_truncated);

【问题讨论】：

我想文本区域不是 MathJax 的一部分……你自己写了 onclick 机制吗？您可以在您的问题中发布代码示例吗？
确定，刚刚更新@Igor
对不起，我不熟悉你控制器中的 showAll 函数，所以我回答了，因为我认为它应该根据你的描述工作。
@Igor 太好了，谢谢！我正在尝试将您的代码应用于我的情况。看起来这正是我所需要的。

标签： javascript mathjax

【解决方案1】：

我认为主要原因是您已经拥有所有包含公式部分的跨度，并且当您添加文本时，引擎会尝试将文本字段的所有内容作为源并重新格式化。由于跨度看起来不像数学源，因此它会丢弃它们（这只是一个猜测，但看起来它是这样工作的）。

我的解决方案：不是直接附加一些文本，而是添加一个新跨度并仅在此跨度中重新生成公式。请注意：如果您添加的文本被这样剪切，它将不起作用：["my super formula: $x \subset", "\mathbb{R}$."].

所以，这是我的简化示例（请注意，我用 id “txt2”刷新跨度）：

<head>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});

  function addText() {
    document.getElementById('txt').innerHTML += '<span id=txt2> ...adding new formula: $x\\subseteq X$</span>';
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"txt2"]);
  }
</script>
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
  <div id=txt>$1\neq 0$</div>
  <input type=button onclick="addText()" value="Do it"/>
</body>

【讨论】：

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

【解决方案2】：

您的原始帖子没有显示您如何将附加文本添加到段落中，但如果它在您的答案中使用innerHTML += ...，那么这可能是您重复数学的来源。通过这样做，您将删除当前的 DOM 并用一个新的 DOM 替换它，从旧的复制但不完全相同。特别是，您丢失了 MathJax 存储在旧 DOM 中记录已处理内容的值，因此当您要求 MathJax 再次排版页面时，看起来所有数学都是新的，因此再次排版，引入了排版数学的第二个副本到文档中。

虽然您当前的版本确实避免了重复，但它仍然丢失了从复制的 DOM 到 MathJax 的所有连接。例如，上下文菜单将不再适用于较旧的数学表达式，因为处理的代码尚未通过设置 innerHTML 复制。所以这不是一个好方法。

你可以试试

document.getElementById('txt')
        .appendChild(document.createTextNode('...adding new formula: $x\\subseteq X$'));

这不会改变现有的 DOM，而只是添加一个新的文本节点。然后您可以再次排版页面而不会出现重复。

【讨论】：