66{{template "head" .}}
77 < div class ="bs-docs-header ">
88 < div class ="container ">
9- < label class ="col-sm-2 "> MarkDown测试 </ label >
9+ < label class ="col-sm-2 "> 自定义模板测试 </ label >
1010 </ div >
1111 </ div >
12+ < form class ="form-horizontal " method ="POST " action ="## " enctype ="multipart/form-data " onsubmit ="return false " id ="formtpl ">
1213 < div class ="container ">
1314 < div class ="bs-example " >
14- < label > *MarkDown内容 :</ label >
15+ < label > *Json内容 :</ label >
1516 < br />
16- < textarea id ="content " name ="content " cols ="30 " rows ="10 " class ="form-control " placeholder ="自定义Markdown内容文本 " onkeyup =showHtml() >
17- [Prometheus故障恢复信息](https://prometheus.com)
18-
19- **[测试告警消息Markdown](https://alertmanager.com)**
20-
21- `告警级别:`严重
22-
23- `开始时间:`2021-05-27T12:28:37.83Z
24-
25- `结束时间:`2021-05-28T00:39:07.83Z
26-
27- `故障主机IP:`127.0.0.1:80
28-
29- **Too Many Alert Message PrometheusAlert**
30- </ textarea >
17+ < textarea id ="jsoncontent " name ="jsoncontent " cols ="30 " rows ="10 " class ="form-control " placeholder ="原始Json内容文本 "> </ textarea >
18+ < br />
19+ < label > *模版内容:</ label >
20+ < br />
21+ < textarea id ="tplcontent " name ="tplcontent " cols ="30 " rows ="10 " class ="form-control " placeholder ="自定义模版内容文本 "> </ textarea >
22+ < br />
23+ < div class ="text-right ">
24+ < button type ="button " class ="btn btn-primary " onclick ="showHtml(); "> 查看效果</ button >
25+ </ div >
3126 </ div >
3227 </ div >
28+ </ form >
3329 < div class ="container ">
34- < label > 显示效果:</ label >
30+ < label > 显示效果:(效果仅供参考,因部分机器人对markdown的支持不同,可能渲染的结果会不尽相同) </ label >
3531 < div id ='MarkdownHtml ' class ="bs-example "> </ div >
36- < script type ="text/javascript " src ="/static/js/jquery-3.3.1.min.js "> </ script >
37- < script type ="text/javascript " src ="/static/js/marked.min.js "> </ script >
38- < script type ="text/javascript ">
39- $ ( function ( ) {
40- showHtml ( ) ;
41- } )
42- function showHtml ( ) {
43- $ ( "#MarkdownHtml" ) . html ( marked ( $ ( "#content" ) . val ( ) ) ) ;
44- } ;
45- </ script >
4632 </ div >
33+
34+ < script type ="text/javascript " src ="/static/js/jquery-3.3.1.min.js "> </ script >
35+ < script type ="text/javascript " src ="/static/js/marked.min.js "> </ script >
36+ < script type ="text/javascript ">
37+ function showHtml ( ) {
38+ var jsoncontent = document . getElementById ( "jsoncontent" ) ;
39+ var tplcontent = document . getElementById ( "tplcontent" ) ;
40+
41+ if ( jsoncontent . value . length == 0 ) {
42+ alert ( '原始Json内容文本不能为空' ) ;
43+ return
44+ } ;
45+
46+ if ( tplcontent . value . length == 0 ) {
47+ alert ( '自定义模版内容文本不能为空' ) ;
48+ return
49+ } ;
50+
51+ $ . ajax ( {
52+ type : "POST" ,
53+ dataType : "json" ,
54+ url : '{{ urlfor "MainController.MarkdownTest"}}' ,
55+ data : $ ( '#formtpl' ) . serialize ( ) ,
56+ success : function ( result ) {
57+ console . log ( result ) ;
58+ $ ( "#MarkdownHtml" ) . html ( marked ( result ) ) ;
59+ } ,
60+ } ) ;
61+
62+ } ;
63+ </ script >
4764{{template "endhtml"}}
0 commit comments