|
<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">×</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">×</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>
|
