1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

 <script type="text/x-mathjax-config">

            MathJax.Hub.Config({

              showProcessingMessages: false,

              tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] }

            });

  $(function() {

   var content = "";

      var Preview = {

              delay: 150,        

              preview: null,    

              buffer: null,      

              timeout: null,     

              mjRunning: false,  

              mjPending: 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.mjPending) return;

                var text = content;

                if (text === this.oldtext) return;

                if (this.mjRunning) {

                  this.mjPending = true;

                  MathJax.Hub.Queue(["CreatePreview",this]);

                } else {

                  this.buffer.innerHTML = this.oldtext = text;

                  this.mjRunning = true;

                  MathJax.Hub.Queue(

                ["Typeset",MathJax.Hub,this.buffer],

                ["PreviewDone",this]

                  );

                }

              },

              PreviewDone: function () {

                this.mjRunning = this.mjPending = false;

                this.SwapBuffers();

              }

            };

            Preview.callback = MathJax.Callback(["CreatePreview",Preview]);

            Preview.callback.autoReset = true;  

      Preview.Init();

      $("#uptitle,#upcontent,#upanswerTitle,#upanswerContent").on("input", function() {

          content = $(this).val();

          Preview.Update();

      });

  });

 </script>

 <script type="text/javascript" src="${pageContext.request.contextPath}/js/mathjax/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>

 <div class="form-group">

     <label for="upanswerTitle"  class="control-label" style="text-align: center;width:20%">答案<span style="color:red;"> *</span></label>

     <textarea id="upanswerTitle" class="form-control"

        style="width: 70%; display: inline-block; margin-right: 15px; padding-left:0px; padding-right:0px;" rows="5" cols=""></textarea>

 </div>

 <div class="form-group">

     <label for="upanswerContent" class="control-label" style="text-align: center;width:20%">解析</label>

     <textarea id="upanswerContent" class="form-control"

        style="width: 70%; display: inline-block; margin-right: 15px; padding-left:0px; padding-right:0px;"

         rows="5" cols=""></textarea>

 </div>

  <div class="form-group">

    <div id="MathPreview" style="padding: 3px; width:100%; margin-top:5px"></div>

    <div id="MathBuffer" style="border:1px solid; padding: 3px; width:100%; margin-top:5px; 

          visibility:hidden; position:absolute; top:0; left: 0"></div>

   </div>