所見即所得編輯器使用MathJax的數學方程

我正在嘗試構建WYSIWYG編輯器使用MathJax編寫數學公式。我試圖從textarea中選擇隨機內容並將其粘貼到一個div中，以將其轉換爲數學等式。所見即所得編輯器使用MathJax的數學方程

<!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顯示的文本請幫我建立這個所見即所得的編輯器

來源

2015-02-11 Harsh Kanakhara

「請幫助我[做我的整個項目]」在這裏真的不太好。你能指定你到底有什麼問題嗎？在textarea中選擇內容？粘貼到div？解析文本來理解它？將解析的文本打印爲數學？如果這些都是這些，那麼你咬掉的東西比咀嚼的更多。 – Teepeemm 2015-02-11 15:18:27

@Teepeemm我有問題解析文本到數學eq。這是由我給出的答案解決的 – 2015-02-11 18:45:52

未來的注意事項：cdn.mathjax.org即將結束其生命週期，請查看https://mathjax.org/cdn-shutting-down獲取遷移提示。 – 2017-04-13 13:19:40

問題解決了

只需插入

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

afte r行32

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

來源

2015-02-11 18:43:10

所見即所得編輯器使用MathJax的數學方程

回答

相關問題