123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>Dynamic Preview of Textarea with MathJax Content</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <script type="text/x-mathjax-config">
- MathJax.Hub.Config({
- showProcessingMessages: false,
- tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
- });
- </script>
- <script type="text/javascript" src="../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
- <script>
- var Preview = {
- delay: 150,
- preview: null,
- buffer: null,
- timeout: null,
- mjRunning: false,
- oldText: null,
-
-
-
- Init: function () {
- this.preview = document.getElementById("MathPreview");
- this.buffer = document.getElementById("MathBuffer");
- },
-
-
-
-
-
- SwapBuffers: function () {
- var buffer = this.preview, preview = this.buffer;
- this.buffer = buffer; this.preview = preview;
- buffer.style.visibility = "hidden"; buffer.style.position = "absolute";
- preview.style.position = ""; preview.style.visibility = "";
- },
-
-
-
-
-
-
-
-
- Update: function () {
- if (this.timeout) {clearTimeout(this.timeout)}
- this.timeout = setTimeout(this.callback,this.delay);
- },
-
-
-
-
-
-
-
- CreatePreview: function () {
- Preview.timeout = null;
- if (this.mjRunning) return;
- var text = document.getElementById("MathInput").value;
- if (text === this.oldtext) return;
- this.buffer.innerHTML = this.oldtext = text;
- this.mjRunning = true;
- MathJax.Hub.Queue(
- ["Typeset",MathJax.Hub,this.buffer],
- ["PreviewDone",this]
- );
- },
-
-
-
-
- PreviewDone: function () {
- this.mjRunning = false;
- this.SwapBuffers();
- }
- };
- Preview.callback = MathJax.Callback(["CreatePreview",Preview]);
- Preview.callback.autoReset = true;
- </script>
- </head>
- <body>
- Type text in the box below:<br/>
- <textarea id="MathInput" cols="60" rows="10" onkeyup="Preview.Update()" style="margin-top:5px">
- </textarea>
- <br/><br/>
- Preview is shown here:
- <div id="MathPreview" style="border:1px solid; padding: 3px; width:50%; margin-top:5px"></div>
- <div id="MathBuffer" style="border:1px solid; padding: 3px; width:50%; margin-top:5px;
- visibility:hidden; position:absolute; top:0; left: 0"></div>
- <script>
- Preview.Init();
- </script>
- </body>
- </html>
|