搭建一个markdown编辑器（一）
2017-08-24 本文已影响0人
chanming
前言
因为妹纸最近在做前端，于是我又有机会接触前端啦= =||.
最后的效果大概是长这样.
首先我们需要学习什么是markdown,就是一种语法.具体自己百度.
过程
我们这一次选择不自个儿造轮子,从github上面使用别人的代码.
github传送门
下载完之后我们需要安装npm进行解压,最后得到一个markdown.js文件
然后官方有一个简单的demo,长这样子
<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>
这个可以得到我们想要的结果，但是长得有点丑，于是我们需要调下CSS，让代码在左边，然后输出的格式在右边，这样看起来好看点。
于是我们简单的在网上copy了一个css的样式
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:100%;
bottom:0;
width:48%;
float:left;
padding:5px;
}
#section {
width:50%;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
.comments {
width: 100%; /*自动适应父布局宽度*/
overflow: auto;
word-break: break-all;
}
</style>
</head>
<body style="height: 100%;">
<script src="markdown.js"></script>
<div id="nav" style="height: 100%;">
<textarea id="text-input" class="comments" oninput="this.editor.update()"
style="height: 100%;" >Type **Markdown** here.</textarea>
</div>
<div id="section">
<div id="preview"> </div>
</div>
</body>
<div>
</div>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</html>
就完成一个搓逼版的markdown编辑器了，当然也存在诸多问题，后面我们再继续完善。
