HTML MarkDown编辑器实现-蒲公英云

HTML MarkDown编辑器实现

文章目录

- 效果
- 实现
- 扩展

效果

在这里插入图片描述

我们可以看到只需要在左边绿色区域输入，右边蓝色区域就会实时输入内容。

这样一个简单的MarkDown就实现了

实现

代码也很简单：

一、使用到的js

markdown.js

<script src="https://cdn.bootcss.com/markdown.js/0.5.0/markdown.min.js"></script>

二、使用到的css,主要是为了样式好看一点

bootstrap.min.css

<script src="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"></script>

三、整个页面代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MarkDown</title>
        <!--适配手机-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="shortcut icon" href="http://admin.zrstt.cn/group1/M00/00/00/rB_YCFsQ_OmAP6VFAAAQvtuENdk882.ico">
        <!--使用bootstrap的样式，比较好看-->
        <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
        <style> h1 { font-family: Consolas, monaco, monospace; font-size: 23px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 23px; } h3 { font-family: Consolas, monaco, monospace; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 23px; } p { font-family: Consolas, monaco, monospace; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; } blockquote { font-family: Consolas, monaco, monospace; font-size: 17px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; } pre { font-family: Consolas, monaco, monospace; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 23px; } #text-input { margin-left: 4%; padding: 15px; height: 800px; width: 96%; border: none; resize: none; } #preview { padding: 15px; width: 96%; border: none; height: 800px; overflow-y:auto; overflow-x:auto; } body { overflow-x: none; } </style>
    </head>
    <body>
        <center>
            <h1>MarkDown Edit</h1>
        </center>
        <div class="row">
            <div class="col-md-6">
                <textarea class="bg-success" id="text-input" oninput="this.editor.update()" rows="6">Type **Markdown** here.</textarea>
            </div>
            <div class="col-md-6">
                <div id="preview" class="bg-primary" rows="6"> </div>
            </div>
        </div>
        <script src="https://cdn.bootcss.com/markdown.js/0.5.0/markdown.min.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>