使用MathJax的数学方程的WYSIWYG编辑器 [英] WYSIWYG Editor for Mathematical Equations using MathJax
本文介绍了使用MathJax的数学方程的WYSIWYG编辑器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用MathJax构建 WYSIWYG编辑器来编写数学公式。我试图从textarea中选择随机内容并将其粘贴到div中以将其转换为数学方程式。
I am trying to build WYSIWYG Editor to write Mathematical Formulas using MathJax. I am trying to select random content from the textarea and pasting it into a div for converting it into a Mathematical Equations.
<!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中显示的文本转换为数学方程
请帮我构建这个WYSIWYG编辑器
推荐答案
解决问题
只需插入
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "pasteselectedContent"]);
第32行后
after line 32
pasteselectedContent.textContent = selectedContent.value.substring(0,start) + " " + replace + " " + selectedContent.value.substring(end,textlength);
这篇关于使用MathJax的数学方程的WYSIWYG编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
