重构代码

violetice · Jun 18, 2018 · 9d49d3f · 9d49d3f
1 parent 8bd15f2
commit 9d49d3f
Show file tree

Hide file tree

Showing 3 changed files with 677 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="layui/css/layui.css">
+    <link rel="stylesheet" href="laymd.css">
+</head>
+<body style="padding: 15px;">
+<div>
+    <div id="demo"></div>
+</div>
+</body>
+<script src="layui/layui.js"></script>
+<script src="laymd/Parser.js"></script>
+<script>
+    layui.use(['layer', 'laymd'], function(){
+        var $ = layui.$,
+            layer = layui.layer,
+            laymd = layui.laymd;
+
+        var parser = new HyperDown;
+
+        var md = laymd.init('demo', {});
+
+        md.on('change', function () {
+            $('iframe').contents().find('body').html(parser.makeHtml(md.getText()));
+        });
+    });
+</script>
+</html>
diff --git a/laymd.css b/laymd.css
@@ -0,0 +1,100 @@
+.layui-laymd {
+    position: relative;
+    display: block;
+    border: 1px solid #e6e6e6;
+    box-sizing: border-box;
+    background-color: #fff;
+}
+
+.layui-laymd-full {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1992;
+}
+
+.layui-laymd-tool {
+    padding: 3px;
+    border-bottom: 1px solid #e6e6e6;
+    font-size: 0;
+}
+
+.layui-laymd-tool i,
+.layui-laymd-tool span {
+    text-align: center;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.layui-laymd-tool i {
+    min-width: 15px;
+    height: 20px;
+    line-height: 20px;
+    padding: 3px 5px;
+    color: #777;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 16px;
+    font-style: normal;
+    font-family: Consolas, "Microsoft Sans Serif", sans-serif;
+}
+
+.layui-laymd-tool i:hover {
+    background-color: #f2f2f2;
+}
+
+.layui-laymd-tool span {
+    width: 1px;
+    height: 20px;
+    margin: 0 10px;
+    background-color: #d2d2d2;
+}
+
+.layui-laymd-full .layui-laymd-area {
+    position: absolute;
+    left: 0;
+    top: 33px;
+    right: 0;
+    bottom: 0;
+}
+
+.layui-laymd-area textarea {
+    resize: none;
+    width: 100%;
+    box-sizing: border-box;
+    vertical-align: middle;
+    padding: 10px;
+    border: none;
+    letter-spacing: 1px;
+    font-family: Consolas, "Microsoft Sans Serif", sans-serif;
+    font-size: 16px;
+    outline: none;
+    z-index: 1993;
+}
+
+.layui-laymd-area iframe {
+    border: none;
+    outline: none;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: none;
+}
+
+.layui-laymd-full textarea {
+    width: 50%;
+    height: 100%!important;
+}
+
+.layui-laymd-full iframe {
+    display: block;
+    width: 50%;
+    left: 50%;
+    height: 100%!important;
+    border-left: 1px solid #e6e6e6;
+}