使用 MathJax 的数学方程的 WYSIWYG 编辑器答案

【问题标题】：WYSIWYG Editor for Mathematical Equations using MathJax使用 MathJax 的数学方程的 WYSIWYG 编辑器
【发布时间】：2016-12-02 17:46:19
【问题描述】：

我正在尝试构建 WYSIWYG 编辑器以使用 MathJax 编写数学公式。我正在尝试从 textarea 中选择随机内容并将其粘贴到 div 中以将其转换为数学方程。

<!DOCTYPE html>
<html>
<head>
    <title>Wrap Selected Content with Dummy Editor</title>
    <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>;
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({tex2jax: { inlineMath: [ ['$','$'], ['\\(','\\)'] ] } });
        MathJax.Hub.Config({tex2jax: { displayMath: [ ['$$','$$'], ['\\(','\\)'] ] } });
    </script>
</head>
<body>
<!--Select some random text from this textarea and click button -->
<textarea id="wrapSelectedContent"></textarea>
<!-- Content should be load here using JavaScript and Convert it into Mathematical Function -->
<div id="pasteSelectedContent" style="width:300px; height:300px; border:2px solid #000;"></div>
<!-- Static Content displayed Successfully -->
<p>$$\sum(a+b)(c+d)$$</p>
<button onclick="wrapContent();">Put Summation Sign</button>
<script type="text/javascript">
    function wrapContent(){
        var selectedContent = document.getElementById("wrapSelectedContent");
        var pasteselectedContent = document.getElementById("pasteSelectedContent");
        var textlength = selectedContent.textLength;
        var start = selectedContent.selectionStart;
        var end = selectedContent.selectionEnd;
        selectedContent.focus();
        selectedContent.setSelectionRange(start,end); 
        var selectedContentValue = selectedContent.value.substring(start, end);
        var replace = "$$\\sum" + selectedContentValue + "$$";
        pasteselectedContent.textContent = selectedContent.value.substring(0,start) + " " + replace + " " + selectedContent.value.substring(end,textlength);        
        console.log("Start Index : " + start);
        console.log("End Index : " + end);
        console.log("Text Content Length : " + textlength);
        console.log(selectedContentValue);
    }
</script>
</body>
</html>

那么如何将 div#pasteSelectedContent 中显示的文本转换为数学方程式请帮助我构建这个所见即所得的编辑器

【问题讨论】：

“请帮助我[完成我的整个项目]”在这里真的不太好。您能具体说明您遇到的问题吗？在文本区域中选择内容？将其粘贴到div？解析文本就明白了吗？将解析后的文本打印为数学？如果是所有这些，那么你已经咬得比你能咀嚼的多。
@Teepeemm 我在将文本解析为数学方程式时遇到问题。这是我给出的答案解决了
未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看mathjax.org/cdn-shutting-down 了解迁移提示。

标签： javascript jquery math mathjax

【解决方案1】：

问题已解决

插入

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

第 32 行之后

pasteselectedContent.textContent = selectedContent.value.substring(0,start) + " " + replace + " " + selectedContent.value.substring(end,textlength);

【讨论】：