搭建一个markdown编辑器（一）

前言

因为妹纸最近在做前端，于是我又有机会接触前端啦= =||.
最后的效果大概是长这样.

首先我们需要学习什么是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编辑器了，当然也存在诸多问题，后面我们再继续完善。

搭建一个markdown编辑器（一）

前言

过程

推荐阅读更多精彩内容