
<!DOCTYPE html>
<html>
<head>
    <title>Markdown Editor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <style type="text/css">
    .fl {
        float:left;
    }
    .clr {
        clear:both;
    }
    #exchage {
        padding: 200px 10px 0;
        cursor: pointer;
    }
    #result {
        border:1px solid;
        min-height:496px;
        width:595px;
        float:left;
    }
    #copy {
        float:right;
        padding-right:120px;
        cursor: pointer;
    }
    </style>
</head>
<body style="background-color:#eff;">
<div class="container">
    <div>
        <span>请输入内容</span>
        <span>md2html:<input type="radio" name="type" value="markdown2html" checked/></span>
        <span>html2md:<input type="radio" name="type" value="html2markdown"/></span>
        <span id="copy">复制</span>
    </div>
    <textarea id="content" cols="70" rows="30" class="fl"></textarea>
    <div id="exchage" class="fl">
    <span>>></span>
    </div>
    <div id="result">
        <div id="container"></div>
        <div class="clr"></div>
    </div>
</div>

<script type="text/javascript" src="http://www.zjmainstay.cn/jquerylib/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#exchage").click(function(){
        if($(this).data("lock")) return false;
        var content = $.trim($("#content").val());
        if(content == '') {
            alert('内容不能为空');
            return false;
        }
        
        var type = $("input[name=type]:checked").val();
        
        $(this).data("lock", true);
        $.ajax({
            url:        'exchangeMarkdown.php',
            type:       'post',
            dataType:   'json',
            data:       {content: content, type: type},
            success:    function(result) {
                $("#exchage").data("lock", null);
                $("#result").data("content", result.html.replace(/\n/g, '<br/>'));
                $("#container").html($("#result").data("content"));
            },
            error:      function(msg) {
                $("#exchage").data("lock", null);
                if(typeof console.log != 'undefined') console.log(msg);
            }
        });
    });
    
    $("#copy").click(function(){
        if($(this).hasClass("clicked")) {
            $(this).removeClass("clicked").text('复制');
            $("#container").empty().html($("#result").data("content"));
        } else {
            $(this).addClass("clicked").text('返回');
            $("#container").html($("<textarea id='copyBox' cols='70' rows='25'></textarea>").val($("#result").data("content").replace(/<br\/>/g, "\n")));
            $("#copyBox").select();
        }
    });
});
</script>
</body>
</html>