Epiceditor 与 MathJax 配对答案

【问题标题】：Epiceditor paired with MathJaxEpiceditor 与 MathJax 配对
【发布时间】：2014-04-03 11:39:52
【问题描述】：

是否可以将脚本（例如 MathJax）加载到 EpicEditor 预览 iFrame 中？我希望我的预览是正确的 Markdown，然后运行 javascript 来预览 MathJax 内容。

谢谢！

【问题讨论】：

【解决方案1】：

看来您应该手动将 MathJax 脚本注入预览器 iframe。像这样的：

var editor = new EpicEditor(opts).load();

previewer = editor.getElement('previewer');
var mathjax = previewer.createElement('script');
mathjax.type = 'text/javascript';
mathjax.src = 'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
previewer.body.appendChild(mathjax);

var config = previewer.createElement('script');
config.type = 'text/x-mathjax-config';
config.text = "MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$']], displayMath: [['$$','$$']], processEscapes: true}});";
previewer.body.appendChild(config);

然后您可以在预览事件中渲染方程式：

editor.on('preview', function() {
    editor.getElement('previewerIframe').contentWindow.eval(
        'MathJax.Hub.Queue(["Typeset",MathJax.Hub]);');
});

这也适用于全屏实时编辑模式。

【讨论】：

如果采用这种方法，有没有一种机制可以在内容改变高度后调整预览 iframe 的大小？ reflow方法根据容器调整iframe大小，不好。
来自未来的注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 以获取迁移提示（并可能为未来的读者更新您的帖子）。