Mathjax insert div write text ContentEditable div?
Question
i reference WYSIWYG Editor for Mathematical Equations using MathJax this Code
this code is here
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>mathjx</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" contenteditable="true" style="width:300px; height:300px; border:2px solid #000;"></div>
<!-- Static Content displayed Successfully -->
<button onclick="wrapContent();">ConVert</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 = "$$" + selectedContentValue + "$$";
pasteselectedContent.textContent = selectedContent.value.substring(0,start) + selectedContent.value.substring(end,textlength);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, "pasteselectedContent"]);
}
</script>
</body>
</html>
code is working very well.
now, I want change <textarea id="wrapSelectedContent"> => <div contenteditable="true"> tag.
i change a div code. but script error. "wh_test.html:27 Uncaught TypeError: selectedContent.setSelectionRange is not a function"
How does it work change this code.. Thanks for reading.
1 answers
solution1
0 ACCPTED 2016-08-16 10:21:09
Firstly use the same ID in contenteditable div. Therefore <textarea id="wrapSelectedContent"></textarea> needs to be changed into <div id="wrapSelectedContent" contenteditable="true"></div> tag.
Secondly div has no value property you have to use innerHTML to get similar results as for textarea. Thus following var selectedContentValue = selectedContent.value.substring(start, end); have to be changed into var selectedContentValue = selectedContent.innerHTML.substring(start, end);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.