markdown如何使用 实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<!--加载editormd.css-->
    <link rel="stylesheet" href="../editor.md-master/css/editormd.css">
    <link rel="stylesheet" href="../layui/src/css/layui.css">
    <!-- English -->
    <!--<script src="editor.md-master/languages/en.js"></script>-->
    <script src="../jquery/jquery-1.11.3.min.js"></script>
<!--加载editormd.js-->
    <script src="../editor.md-master/editormd.js"></script>
    <script src="../layui/src/layui.js"></script>
    <style>
        {literal}
        *{margin: 0;padding: 0;}
        p,span,b,ul,li{font-size:14px;}
        a{display: block;color: #000;text-decoration: none;}
        .p_limit{
            display: inline-block;
            margin:0 5px;
            text-align: center;
            width: 60px;
            background: #e8eef1;

        }
        .active{background: #e0a681;}
        {/literal}
    </style>
</head>
<body>

<!--<header>-->
    <!--<h1>多语言支持(l18n)</h1>-->
    <!--<p>multi-languages for l18n.-->
        <!--<select id="lang-select">-->
            <!--<option selected="selected">Languages</option>-->
            <!--<option value="en">English (en)</option>-->
            <!--<option value="zh-tw">繁體中文 (zh-tw)</option>-->
            <!--<option value="zh-cn">简体中文 (zh-cn)</option>-->
        <!--</select>-->
    <!--</p>-->
<!--</header>-->
<div style="">
    <h1 style="text-align:center;">hello world</h1>
    <div style="width: 1000px;margin: auto;">
        <a id="loginBtn" style="text-align: center;width: 10%;height: 35px;line-height: 35px;color: #fff;background:
        #000"
            href="javascript:void (0)">登录/注册</a>
    </div>

    <hr color="#000">
    <form id="form1" action="/demo/01/index.php?action=saveContent" method="post">
        <div class="editormd" id="editormd">
            <textarea class="editormd-markdown-textarea" name="editormd-markdown-doc"></textarea>
            <!-- html textarea 需要开启配置项 saveHTMLToTextarea == true -->
            <textarea class="editormd-html-textarea" name="editormd-html-code"></textarea>
        </div>
        <div style="width: 1000px;margin: auto;">
            <a id="publish" style="text-align: center;width: 20%;height: 35px;line-height: 35px;color: #fff;background: #000" href="javascript:void (0)">发表</a>
        </div>
    </form>


    <div  style="width: 1000px;height:40px;line-height:40px;margin:10px auto;">
        {$pageHtml}
    </div>
    <div style="width: 1000px;margin: auto;">
        <ul style="float: left;list-style: none">
            {foreach from=$result key=k item=v}
            <li style="margin:30px 0 ;">
               <span style="display: inline-block;margin-right: 10px;">{$offset++}.用户名:{$v.id}</span>
                发表时间:{$v.create_time}
                <a href="#" style="">{$v.htmlData|htmlspecialchars_decode}</a>
            </li>
            <hr>
            {/foreach}
        </ul>
    </div>


</div>
<div class="loginContent" style="display: none;">
    <form class="layui-form" action="" style="margin-top: 20px;">
        <div class="layui-form-item" style="width: 80%;">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required   placeholder="请输入用户名" autocomplete="off"
                       class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required  placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">必填</div>-->
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="phone"   placeholder="请输入手机" autocomplete="off"
                       class="layui-input">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">必填</div>-->
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="js-reg">立即注册</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
            <div class="layui-btn-group" style="float:right;margin-right:10px;">
                <button class="layui-btn layui-btn-mini" layui-submit lay-filter="js-login">已有账号,现在登录</button>
            </div>
        </div>
    </form>
</div>

    <script>

      $(function () {
          var testEditor;
          //初始化编辑器
          testEditor = editormd("editormd",{
              width:"1000px",
              height:"300px",
              theme:"dark|default",
              previewTheme:"default|dark",
              syncScrolling:"single",
              path:"editor.md-master/lib/",
              emoji : true,
              saveHTMLToTextarea : true,//保存HTML源码
              imageUpload    : true,
              imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
              imageUploadURL : "Index.php?action=upload",
          });
          // console.log(testEditor);
          //functions

          // 点击发表
          $("#publish").click(function () {
              testEditor.getMarkdown();// 获取 Markdown 源码
              testEditor.getHTML();// 获取 Textarea 保存的 HTML 源码
              var params = $("#form1").serialize();
              $.ajax({
                  type:'post',
                  url:'/demo/01/index.php?action=saveContent',
                  data:params,
                  dataType:'Json',
                  success:function (data) {
                     layer.msg(data.message);
                     location.reload();
                     return;
                  }
              });


          });
          $(".goPage").click(function () {
             var page = $("input[name='page']").val();
                window.location.href='/demo/01/index.php?page='+page;
                return;
          });

          // layui
          layui.use(['form','layer','laydate'],function () {
              var layer = layui.layer,
                  laydate = layui.laydate,
                  form = layui.form;

                $("#loginBtn").click(function () {
                    layer.open({
                        type:1,
                        anim:1,
                        area:['500px','300px'],
                        shade:[0.8,'#ddd'],
                        content:$(".loginContent").html(),
                    })
                });

              //监听提交
              form.on('submit(js-reg)', function(data){
                  layer.msg('reg');return;
                  var action = '';
                  $.post('');
                  layer.msg(JSON.stringify(data.field));
                  return false;
              });
              //监听提交
              form.on('submit(js-login)', function(data){
                  layer.msg('login');return;

                  var action = '';
                  $.post('');
                  layer.msg(JSON.stringify(data.field));
                  return false;
              });

          })

      })


    </script>
</body>
</html>

 

转载于:https://my.oschina.net/u/2968862/blog/1942043

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值