sample-dynamic-3a.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Dynamic Preview of Textarea with MathJax Content</title>
  5. <!-- Copyright (c) 2012-2018 The MathJax Consortium -->
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <script type="text/x-mathjax-config">
  9. MathJax.Hub.Config({
  10. showProcessingMessages: false,
  11. tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }
  12. });
  13. </script>
  14. <script type="text/javascript" src="../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  15. <script>
  16. var Preview = {
  17. delay: 150, // a short delay before processing after typing
  18. typeset: null, // the typeset preview area (filled in by Init below)
  19. preview: null, // the untypeset preview (filled in by Init below)
  20. buffer: null, // the new preview to be typeset (filled in by Init below)
  21. oldtext: '', // used to see if an update is needed
  22. pending: false, // true when a restart is in the MathJax queue
  23. //
  24. // Get the preview and buffer DIV's
  25. //
  26. Init: function () {
  27. this.typeset = document.getElementById("MathPreview");
  28. this.buffer = document.createElement("div");
  29. this.review = document.createElement("div");
  30. },
  31. //
  32. // This gets called when a key is pressed in the textarea.
  33. //
  34. Update: function () {
  35. var text = document.getElementById("MathInput").value;
  36. if (text !== this.oldtext) {
  37. this.oldtext = text;
  38. if (!this.pending) {
  39. this.pending = true;
  40. MathJax.Hub.Queue(["Restart",this]);
  41. }
  42. }
  43. },
  44. Restart: function () {
  45. var text = "<p>"+this.oldtext.replace(/\n\n+/g,"</p><p>")+"</p>";
  46. this.buffer.innerHTML = this.typeset.innerHTML = text;
  47. this.pending = false;
  48. MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.typeset]);
  49. }
  50. };
  51. </script>
  52. </head>
  53. <body>
  54. Type text in the box below:<br/>
  55. <textarea id="MathInput" cols="60" rows="10" onkeyup="Preview.Update()" style="margin-top:5px">
  56. </textarea>
  57. <br/><br/>
  58. Preview is shown here:
  59. <div id="MathPreview" style="border:1px solid; padding: 3px; width:50%; margin-top:5px"></div>
  60. <script>
  61. Preview.Init();
  62. </script>
  63. </body>
  64. </html>