|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>markdown编辑器</title>
<link href="/static/css/markdown.css" rel="stylesheet" />
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/ace.js"></script>
<script src="/static/js/marked.js"></script>
<script src="/static/js/showPanel.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline: none;
border-radius: 0;
}
html,
body {
width: 100%;
height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #ebebeb;
}
#bar {
height: 130px;
width: 100%;
color: #fff;
}
#bar #topbar {
height: 40px;
background-color: #337AB7;
width: 100%;
color: #fff;
line-height: 50px;
}
#bar #czbar {
height: 50px;
background-color: #FFFFFF;
width: 100%;
color: #fff;
line-height: 50px;
}
#bar #toolbar {
height: 40px;
background-color: #337AB7;
width: 100%;
color: #fff;
line-height: 50px;
}
#container {
overflow: auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 130px;
}
#editor-column,
#preview-column {
width: 49.5%;
height: 100%;
overflow: auto;
position: relative;
background-color: #F6F6F6;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
#toolbar img {
width: 25px;
height: 25px;
padding-top: 8px;
padding-bottom: 7px;
margin-left: 10px;
}
#toolbar img:hover {
background: #EBEBEB;
cursor: pointer;
}
#commit {
color: #FFFFFF;
padding: 5px 15px;
background: #BE1A21;
border: 0px none #FFECEC;
}
#commit:hover {
cursor: pointer;
background: #CB474D;
}
#dialog{
position: fixed;
height: 400px;
width: 550px;
background: #FFFFFF;
z-index: 5;
left: 30%;
border: 1px solid gray;
top: 25%;
display: none;
}
#showImg{
height: 160px;
width: 160px;
position: absolute;
border: 0.5px solid gainsboro;
bottom: 80px;
left:35%;
}
#cancel{
border: 0px none #FFECEC;
background: #999999;
color: #FFFFFF;
padding: 5px 15px;
position: absolute;
top: 8px;
right: 100px;
}
#cancel:hover{
background: #AAAAAA;
}
#insert{
border: 0px none #FFECEC;
background: #BE1A21;
color: #FFFFFF;
padding: 5px 15px;
position: absolute;
top: 8px;
right: 30px;
}
#insert:hover{
background: #CB474D;
}
#upload{
border: 0px none #FFECEC;
background: #999999;
color: #FFFFFF;
padding: 7px 30px;
position: absolute;
top: 67px;
right: 40px;
}
#upload:hover{
background: #AAAAAA;
}
#filediv{
width: 70%;
height: 30px;
top: 70px;
left: 20px;
position: absolute;
}
#file{
width: 95%;
height: 30px;
position: relative;
top: -27px;
opacity: 0.000001;
cursor: pointer;
}
</style>
<script>
$(function(){
$('#dialog').hide();
})
</script>
</head>
<body>
<div id='bar'>
<div id="topbar">
</div>
<div id="czbar">
<input style="font-size: 26px;width: 80%;padding-left: 10px;border: 0px none #FFFFFF;padding-top: 5px;" type="text" value="文章标题" placeholder="文章标题" />
<select id="group">
<option value="volvo">android</option>
<option value="saab">算法</option>
<option value="opel">java思想</option>
<option value="audi">web</option>
</select>
<button id="commit">发表博客</button>
</div>
<div id="toolbar">
<img src="/static/img/bold.png" id="bold" onclick="insertText('**这里填写要加粗的文字**')"/>
<img src="/static/img/italic.png" id="italic" onclick="insertText('_这里填写要斜体的文字_')"/>
<img src="/static/img/hyperlink.png" id="hyperlink" onclick="insertText('[这里写连接的描述](这里填写连接地址)')"/>
<img src="/static/img/code.png" id="code" onclick="insertText('```\n这里插入代码\n```')"/>
<img src="/static/img/image.png" id="image" onclick="showDialog()"/>
</div>
</div>
<div id='container'>
<div id='editor-column' class='pull-left'>
<div id='panel-editor' style="height: 100%;">
<!--编辑区-->
<div class="editor-content" id="mdeditor" style="height: 100%;"></div>
</div>
</div>
<div id='preview-column' class='pull-right'>
<div id='panel-preview'>
<!--显示区-->
<div id="preview" class="markdown-body"></div>
</div>
</div>
<div id="dialog">
<div style="position: absolute;height: 40px;width: 100%;background: #FFFFFF;border-bottom: 1px solid gray;">
<span style="position: absolute;left: 10px;top: 10px;color: gray;">插入图片</span>
<img src="img/X.png" style="height: 25px;width: 25px;position: absolute;right: 10px;top: 10px;cursor: pointer;" onclick="f_cancel()"/>
</div>
<div>
<div id="filediv">
<span style="background: gray;color: #FFFFFF;padding: 6px 10px;">选择图片</span>
<input type="text" id="fileName" style="height: 25px;width: 70%;"/>
<input type="file" id="file" name="file" onchange="setFile()"/>
</div>
<button id="upload" onclick="uploadFile()">上传</button>
</div>
<img id="showImg"/>
<div style="position: absolute;bottom: 1px;width: 100%;height: 40px;border-top: 1px solid gray;">
<button id="cancel" onclick="f_cancel()">取消</button>
<button id="insert" onclick="insert()">插入</button>
</div>
</div>
<script>
var imgUrl='';//上传图片返回的url
var acen_edit = ace.edit('mdeditor');//左侧编辑框
acen_edit.setTheme('ace/theme/chrome');
acen_edit.getSession().setMode('ace/mode/markdown');
acen_edit.renderer.setShowPrintMargin(false);
$("#mdeditor").keyup(function() {//给左侧编辑框添加事件，，当键盘抬起时，右侧实时显示左侧的md内容
$("#preview").html(marked(acen_edit.getValue()));
});
function f_commit() {
console.log($('#group').val());
}
//DownPanel是我自己写的一个提示，当鼠标移到该dom上，回显示相关提示
$('#bold').DownPanel({
render: '<span style="color:#ffffff;">加粗</span>',
background: '#000000',
top: ($('#bold').offset().top + 40),
left: ($('#bold').offset().left)
});
$('#code').DownPanel({
render: '<span style="color:#ffffff;">插入代码</span>',
background: '#000000',
top: ($('#code').offset().top + 40),
left: ($('#code').offset().left)
});
$('#hyperlink').DownPanel({
render: '<span style="color:#ffffff;">插入超链接</span>',
background: '#000000',
top: ($('#hyperlink').offset().top + 40),
left: ($('#hyperlink').offset().left)
});
$('#image').DownPanel({
render: '<span style="color:#ffffff;">插入图片</span>',
background: '#000000',
top: ($('#image').offset().top + 40),
left: ($('#image').offset().left)
});
$('#italic').DownPanel({
render: '<span style="color:#ffffff;">斜体</span>',
background: '#000000',
top: ($('#italic').offset().top + 40),
left: ($('#italic').offset().left)
});
//左侧插入，用户插入一些特定方法
function insertText(val) {
acen_edit.insert(val); //光标位置插入
}
//选择图片后，用于显示图片路径
function setFile(){
$('#fileName').val($('#file').val());
}
//上传图片到服务器，返回图片地址
function uploadFile(){
imgUrl='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white.png';
$('#showImg').attr('src','https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white.png');
}
//插入图片弹窗取消
function f_cancel(){
$('#dialog').hide();
}
//插入图片
function insert(){
$('#dialog').hide();
insertText('')
}
//显示弹窗
function showDialog(){
$('#dialog').show();
}
</script>
</body>
</html>
|
