hello，大家好，我是wangzirui32，今天我们来学习如何使用Marked+Bootstarp简单实现Markdown文本编辑器，开始学习吧！

1. Marked-js

Marked-js 是一个用 JS代码实现的 Markdown 解析器，能快速解析 Markdown 代码并生成为 HTML ，Github项目主页：https://github.com/markedjs/marked，可以由CDN引入：

<script src="https://cdn.bootcdn.net/ajax/libs/marked/4.0.2/marked.min.js"></script>

也可以下载项目源码进行自定义配置，这里以CDN引入为例。
我们需要使用函数marked.parse进行解析：

HTML_text = marked.parse(Markdown_text);

以上为实例代码，将会把Markdown_text转化为HTML并赋值给HTML_text。

2. 实现思路

我们需要使用Bootstarp，将页面划为两个区域，一个为编辑区，一个为预览区，当编辑区的文本出现改变时，触发js代码，更新预览区，从而实现实时预览，还要实现Markdown文本下载和HTML下载，使用js的blob对象实现。

3. 编辑器代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown 文本编辑器</title>
    <!--  引入Bootstarp和Marked-js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/marked/4.0.2/marked.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
    	/* CSS样式 */
        #edit {
            width: 100%;
            height: 100%;
            padding-left: 10px;
            font-size: 15px;
        }
        .col-lg-6 {
            width: 50%;
            height: 100%;
        }
        html {
            height: 100%;
        }
        /* 背景渐变色 */
        body {
            background-image: -moz-linear-gradient(180deg, rgb(225, 255, 204), rgb(153, 173, 255));
            background-image: -webkit-linear-gradient(180deg, rgb(225, 255, 204), rgb(153, 173, 255));
            background-image: linear-gradient(180deg, rgb(225, 255, 204), rgb(153, 173, 255));
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 style="text-align: center;">Markdown文本在线编辑器</h1>
        <!-- 下载操作 -->
        <button class="btn btn-primary" onclick="download(markdown, 'content.md');">下载Markdown文本</button>
        <button class="btn btn-success" onclick="download(html_md, 'content.html');">下载HTML文本</button>
        <script>
        	// 下载函数定义
            download = function(content, filename){
            	// 创建Blob对象
                var blob = new Blob([content], {type: 'text/plain'});
                // 创建a标签
                var a = document.createElement('a');
                // 为blob对象创建url
                var url = window.URL.createObjectURL(blob)
    
                a.style = "display: none";  // 隐藏a标签
                a.href = url;               // 指向链接
                a.download = filename;      // 下载后保存的文件名
                a.click();                  // 自动点击
                document.parentNode.removeChild(a);  // 删除a标签
            }
        </script>
        <hr>
        <div class="row">
            <div class="col-lg-6" id="input">
                <script>
                    html_md = "";
                    markdown = "";
                    preview = function(){
                    	// 保存markdown内容
                        markdown = document.getElementById("edit").innerText;
                        // 保存HTML内容
                        html_md = marked.parse(markdown);
                        // 更新预览
                        document.getElementById("preview").innerHTML = html_md;
                    };
                </script>
                <!-- 可编辑的div标签 -->
                <div contenteditable="true" class="form-control" oninput="preview();" id="edit"></div>
            </div> 
            <div class="col-lg-6">
                <div class="panel panel-default">
               		<!-- 预览效果 -->
                    <div class="panel-body" id="preview"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>