rebuild

violetice · Jun 19, 2018 · a7db287 · a7db287
1 parent d6a5627
commit a7db287
Show file tree

Hide file tree

Showing 5 changed files with 511 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,6 @@
     <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>
@@ -52,7 +51,7 @@
         </div>
 
         <div class="layui-form-item" pane="">
-            <div id="demo"></div>
+            <div id="demo" class="layui-laymd-full"># This id H1</div>
         </div>
 
         <div class="layui-form-item">
@@ -62,20 +61,26 @@
 </div>
 </body>
 <script src="layui/layui.js"></script>
-<script src="Parser.js"></script>
+<script src="laymd/Parser.js"></script>
 <script>
-    layui.use(['layer', 'laymd'], function(){
+    layui.config({base: 'laymd/'}).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 () {
-            this.setPreview(parser.makeHtml(md.getText()));
+            this.setPreview(parser.makeHtml(this.getText()));
         });
+
+        //初始化数据预览
+        md.do('change');
     });
 </script>
-</html>
+</html>
diff --git a/Parser.js → laymd/Parser.js b/Parser.js → laymd/Parser.js
diff --git a/laymd.css → laymd/laymd.css b/laymd.css → laymd/laymd.css
@@ -79,7 +79,7 @@
     padding: 10px;
     border: none;
     letter-spacing: 1px;
-    font-family: Consolas, "Microsoft Sans Serif", sans-serif;
+    font-family: Consolas, "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
     font-size: 16px;
     outline: none;
     word-wrap: break-word;

diff --git a/laymd.js → laymd/laymd.js b/laymd.js → laymd/laymd.js
@@ -2,7 +2,26 @@ layui.define(['jquery'], function(exports) {
     "use strict";
 
     var $ = layui.$,
-        MOD_NAME = 'laymd';
+        MOD_NAME = 'laymd',
+        JS_PATH;
+
+    //获取JS所在路径
+    if (document.currentScript) {
+        JS_PATH = document.currentScript.src;
+    } else {
+        var js = document.scripts, last = js.length - 1, src;
+        for(var i = last; i > 0; i--){
+            if(js[i].readyState === 'interactive'){
+                src = js[i].src;
+                break;
+            }
+        }
+        JS_PATH = src || js[last].src;
+    }
+    JS_PATH = JS_PATH.substring(0, JS_PATH.lastIndexOf('/') + 1);
+
+    //加载CSS
+    layui.link(JS_PATH + 'laymd.css');
 
     //实例化
     var MD = function (id, options) {
@@ -34,6 +53,9 @@ layui.define(['jquery'], function(exports) {
         //获取编辑器容器
         EL.$div = $(typeof(id) === 'string' ? '#' + id : id).addClass('layui-laymd');
 
+        //获取默认值
+        var initValue = EL.$div.text();
+
         //设置要显示的工具
         var toolBar = [];
         layui.each(config.tools, function(index, item){
@@ -52,15 +74,11 @@ layui.define(['jquery'], function(exports) {
 
         //设置编辑框和预览框
         EL.$div.find('.layui-laymd-area').height(config.height);
-        EL.$textArea = EL.$div.find('textarea').attr('name', EL.$div.attr('name') || EL.$div.prop('id'));
+        EL.$textArea = EL.$div.find('textarea').attr('name', EL.$div.attr('name') || EL.$div.prop('id')).val(initValue);
         EL.$iframe = EL.$div.find('iframe');
 
         //设置预览默认样式
-        EL.$iframe.contents().find('head').append([
-            '<style>',
-            '',
-            '</style>'
-        ].join(''));
+        EL.$iframe.contents().find('head').append('<link rel="stylesheet" href="' + JS_PATH + 'preview.css' + '">');
 
         //获取DOM
         var textArea = EL.$textArea[0];
@@ -92,6 +110,18 @@ layui.define(['jquery'], function(exports) {
             }
         });
 
+        //滚动事件
+        EL.$textArea.scroll(function () {
+            console.log(EL.$iframe.contents().find('body').get(0).scrollHeight, this.scrollHeight);
+
+            var p = EL.$iframe.contents().find('body').get(0).scrollHeight / this.scrollHeight;
+
+            //console.log(this.scrollTop, p, this.scrollTop * p);
+
+            EL.$iframe[0].contentWindow.scroll(0, this.scrollTop * p);
+
+        });
+
         //输入法输入事件
         var composition = false, preText, sufText;
         EL.$textArea.on('input', function (e) {
@@ -117,6 +147,11 @@ layui.define(['jquery'], function(exports) {
             layui.onevent.call(this, MOD_NAME, MOD_NAME + '(' + event + ')', callback);
         };
 
+        //执行某个动作
+        this.do = function (action, event, element, params) {
+            actions[action] && actions[action].call(THIS, event, element, EL, params);
+        };
+
         //定时存储操作记录
         setInterval(function () {
             THIS.history.undo(true);