ck-ops/code/alert/views/markdown_test.html

{{template "main" .}}
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="/markdowntest" class="nav-link">模板管理</a>
      </li>
    </ul>

  </nav>
  <!-- /.navbar -->

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Markdown测试</h1>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title" style="color:red">** 用于查看模版渲染效果</h3>

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
        <div class="card-body">
		<form class="form-horizontal" method="POST" action="##" enctype="multipart/form-data" onsubmit="return false" id="formtpl">
			<label>*Json内容: 原始Json内容文本</label>
			<br />
			<textarea id="jsoncontent" name="jsoncontent" class="form-control" style="color:white;background-color:black" cols="30" rows="10" placeholder="原始Json内容文本"></textarea>
			<br />
			<label>*模版内容: 自定义模版内容文本</label>
			<br />
			<textarea id="tplcontent" name="tplcontent" class="form-control" style="color:#dc1aa9;background-color:black" cols="30" rows="10" placeholder="自定义模版内容文本"></textarea>
			<br />
			<div class="text-right">
			
			<a class="btn btn-app bg-success" onclick="showHtml();">
			  <i class="fas fa-bullhorn"></i> 查看效果
			</a>
			</div>
		</form>
        </div>

      </div>
      <!-- /.card -->


      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">显示效果: 效果仅供参考，因部分机器人对markdown的支持不同，可能渲染的结果会不尽相同</h3>

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
              <i class="fas fa-minus"></i>
            </button>
            <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
              <i class="fas fa-times"></i>
            </button>
          </div>
        </div>
        <div class="card-body" id='MarkdownHtml'>
		 <!-- /.Show MarkdownHtml -->
        </div>
        <!-- /.card-body -->
      </div>
      <!-- /.card -->


    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
{{template "endhtml"}}
<script>
function showHtml(){
	var jsoncontent=document.getElementById("jsoncontent");
	var tplcontent=document.getElementById("tplcontent");

	if (jsoncontent.value.length==0){
		alert('原始Json内容文本不能为空');
		return
	};

	if (tplcontent.value.length==0){
		alert('自定义模版内容文本不能为空');
		return
	};
	
	$.ajax({
		type: "POST",
		dataType: "json",
		url: '{{ urlfor "MainController.MarkdownTest"}}',
		data: $('#formtpl').serialize(),
		success: function (result) {
			console.log(result);
			$("#MarkdownHtml").html(marked(result));
		},
	});
	
};
</script>
{{template "jshtml"}}