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>

扩展

上面实现的是最简单，其实，还可以在此基础上添加一些工具，类似有道云笔记上面一样，有需要的可以自行实现

在这里插入图片描述

posted @ 2018-12-20 17:55  leigq  阅读(517)  评论(0)  编辑  收藏  举报