XMTT
/
markdown-wiki


			
				
					
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
							<html lang="zh-cn">
<head>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <!-- <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> -->
    <!-- <link href="/static/css/markdown.css" rel="stylesheet" /> -->
    <script src="/static/ace/ace.js"></script>
    <script src="/static/ace/mode-markdown.js"></script>
    <script src="/static/ace/theme-chrome.js"></script>
    <!-- <script src="/static/js/marked.js"></script> -->
    <!-- <script src="/static/js/showPanel.js"></script> -->
    <!-- <link rel="stylesheet" href="/static/codemirror-5.31.0/lib/codemirror.css"/> -->
    <!-- <script src="/static/codemirror-5.31.0/lib/codemirror.js"></script> -->
    <!--引入css文件，用以支持主题-->
    <!-- <link rel="stylesheet" href="/static/codemirror-5.31.0/theme/solarized.css"/> -->
    <!-- <script src="/static/codemirror-5.31.0/mode/markdown/markdown.js"></script> -->
    <link rel="stylesheet" href="/static/highlight/styles/solarized-light.css">
    <script src="/static/highlight/highlight.pack.js"></script>
    <title>MarkDown-Wiki:
        <?php echo $doc;?>
    </title>
</head>
<body>
    <header>
        <span class="logo">
            <a href="/index">HUWIKI</a>
        </span>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" onclick="edit()">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑
        </button>
        <span>
            <!-- <img src="../static/img/header_color.png" alt="调色板" data-status="0" onclick="changeColor(this);"> -->
        </span>
        <span>
            <ul class="select_header_color" style="display: none;">
                <li style="background-color: aquamarine;"><a href="javascript: doChange('aquamarine');">aquamarine</a></li>
                <li style="background-color: azure;"><a href="javascript: doChange('azure');">azure</a></li>
                <li style="background-color: beige;"><a href="javascript: doChange('beige');">beige</a></li>
                <li style="background-color: cyan;"><a href="javascript: doChange('cyan');">cyan</a></li>
                <li style="background-color: floralwhite;"><a href="javascript: doChange('floralwhite');">floralwhite</a></li>
                <li style="background-color: gainsboro;"><a href="javascript: doChange('gainsboro');">gainsboro</a></li>
                <li style="background-color: gold;"><a href="javascript: doChange('gold');">gold</a></li>
                <li style="background-color: greenyellow;"><a href="javascript: doChange('greenyellow');">greenyellow</a></li>
                <li style="background-color: hotpink;"><a href="javascript: doChange('hotpink');">hotpink</a></li>
                <li style="background-color: ivory;"><a href="javascript: doChange('ivory');">ivory</a></li>
                <li style="background-color: khaki;"><a href="javascript: doChange('khaki');">khaki</a></li>
                <li style="background-color: lightgrey;"><a href="javascript: doChange('lightgrey');">lightgrey</a></li>
                <li style="background-color: lime;"><a href="javascript: doChange('lime');">lime</a></li>
                <li style="background-color: linen;"><a href="javascript: doChange('linen');">linen</a></li>
                <li style="background-color: mistyrose;"><a href="javascript: doChange('mistyrose');">mistyrose</a></li>
                <li style="background-color: navajowhite;"><a href="javascript: doChange('navajowhite');">navajowhite</a></li>
                <li style="background-color: oldlace;"><a href="javascript: doChange('oldlace');">oldlace</a></li>
                <li style="background-color: orangered;"><a href="javascript: doChange('orangered');">orangered</a></li>
                <li style="background-color: orchid;"><a href="javascript: doChange('orchid');">orchid</a></li>
                <li style="background-color: palegreen;"><a href="javascript: doChange('palegreen');">palegreen</a></li>
                <li style="background-color: papayawhip;"><a href="javascript: doChange('papayawhip');">papayawhip</a></li>
                <li style="background-color: peachpuff;"><a href="javascript: doChange('peachpuff');">peachpuff</a></li>
                <li style="background-color: thistle;"><a href="javascript: doChange('thistle');">thistle</a></li>
                <li style="background-color: wheat;"><a href="javascript: doChange('wheat');">wheat</a></li>
                <li style="background-color: white;"><a href="javascript: doChange('white');">white</a></li>
            </ul>
        </span>
    </header>
    <aside>
        <div class="nav" style="z-index: 99;">
            <span>位置: <a href="/index">index</a></span>
            <?php
                $dir_name = pathinfo($doc, PATHINFO_DIRNAME);
                $nav = explode('/',$dir_name);
                $temp = "/index/";
                foreach ($nav as $val) {
                    if ($val=='.' || $val == '..') {
                        continue;
                    } else {
            ?>
            <span> / <a href="<?php echo $temp.$val.'/index.md';?>">
                    <?php echo $val;?>
                </a></span>
            <?php
                    }
                    $temp .= $val ."/";
                }
            ?>
        </div>
        <div class="toc">
            <?php echo $toc;?>
        </div>
    </aside>
    <!--article标签中就是我们编写的文本内容-->
    <article>
        <div class="top">
        </div>
        <div class="content">
            <?php
                if ($is_file_exists) {
                    echo $content;
                } else {
            ?>
            <div class="is_file_exists">
                <span>文档不存在, 点击<a href='javascript:void(0213123);' onclick='edit()'>新建文档</a></span>
            </div>
            <?php
                }
            ?>
        </div>
    </article>
    <!-- 编辑 Modal  -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-edit">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="editor-content" id="mdeditor" style="height: 70%;"><?php echo $text;?></div>
                    <!-- <textarea class="form-control" rows="20" style="resize:vertical" id="mdeditor" name="mdeditor"><?php echo $text;?></textarea> -->
                    <!-- begin code -->
                    <!-- <textarea class="form-control" id="mdeditor" name="mdeditor"><?php echo $text;?></textarea> -->
                    <!-- end code-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="save('<?php echo $doc;?>')">Save
                        changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 登录 Modal  -->
    <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel">
        <div class="modal-dialog" role="document" style="margin-top: 200px;">
            <div class="modal-content modal-login">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="loginModalLabel">登录</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" placeholder="请输入密码">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="login()">LOGIN</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            // 表格加上边框
            $("table").addClass('table table-bordered');
            
            if (storage.getItem("headerColor")) {
                var color = storage.getItem("headerColor");
                $("header").css('background-color', color);
            }
        });
        //修改header background-color
        function changeColor(obj) {
            // console.log($(obj).data("status"));
            var status = $(obj).data("status");
            if (status == 0) {
                $(".select_header_color").css("display", "block");
                $(obj).data("status", 1);
            } else {
                $(".select_header_color").css("display", "none");
                $(obj).data("status", 0);
            }
        }
        function doChange(color) {
            // console.log(color);
            // var color = $(obj).val();
            storage.setItem("headerColor", color);
            $("header").css("background-color", color);
        }
        // 代码高亮
        document.addEventListener('DOMContentLoaded', (event) => {
            document.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightBlock(block);
            });
        });
        // ace 编辑器
        var editor = ace.edit('mdeditor');//左侧编辑框
        editor.setTheme('ace/theme/chrome');
        editor.getSession().setMode('ace/mode/markdown');
        editor.renderer.setShowPrintMargin(false);
        var imgUrl = '';//上传图片返回的url
        // codemirror
        // var editor = CodeMirror.fromTextArea(document.getElementById("mdeditor"), {
        //     theme: "solarized",	//设置主题
        //     mode: "markdown",    //实现groovy代码高亮
        //     // mode: "text/x-java", //实现Java代码高亮
        //     lineNumbers: true,	//显示行号
        //     // lineWrapping: true,	//代码折叠
        //     // foldGutter: true,
        //     // gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        //     // matchBrackets: true,	//括号匹配
        //     //readOnly: true,        //只读
        // });
        // textarea
        // editor = {
        //     getValue() {
        //         return $("#mdeditor").val();
        //     }
        // };     
        var storage = window.sessionStorage
        function edit() {
            if (storage == 'undefined') {
                alert("浏览暂不支持sessionStorage, 无法启用编辑")
            } else {
                if (storage.getItem("token")) {
                    $("#myModal").modal('show');
                } else {
                    $("#loginModal").modal('show');
                }
            }
            // console.log(editor.getValue());
            // window.location.href="/editor";
        }
        function login() {
            let username = document.querySelector('#username').value;
            let password = document.querySelector('#password').value;
            var params = new URLSearchParams();
            params.append('username', username);
            params.append('password', password);
            axios.post(
                '/login',
                params
            ).then((res) => {
                if (res.data.code === 0) {
                    // 本地存储token
                    storage.setItem('token', res.data.token);
                    $("#loginModal").modal('hide');
                    // 弹出编辑框
                    $("#myModal").modal('show');
                } else {
                    console.log(res.data.msg);
                }
            }).catch(function (error) {
                console.log(error);
            });
        }
        function save(doc) {
            var text = editor.getValue();
            // console.log(editor.getValue());
            // return false;
            params = {
                'doc': doc,
                'content': text
            };
            axios({
                method: "POST",
                url: `/save`,
                data: JSON.stringify(params),
                headers: {
                    'token': storage.getItem("token"),
                    'Content-Type': 'application/json'
                }
            }).then(function (res) {
                if (res.data.code == 0) {
                    // acen_edit.destroy();
                    // acen_edit.container.remove();
                    console.log(res.data.msg);
                    alert("保存成功");
                    $("#myModal").modal('hide');
                    setTimeout(window.location.reload(), 1500);
                } else {
                    alert(res.data.msg);
                }
            }).catch(function (error) {
                console.log(error);
            });
        }
    </script>
</body>
</html>