1、格式化了 markdown.js 的代码；2、文档阅读页面中增加了分隔条功能。

static/js/markdown.js

@@ -1,32 +1,32 @@
 $(function () {
     window.addDocumentModalFormHtml = $(this).find("form").html();
     window.editor = editormd("docEditor", {
-        width : "100%",
-        height : "100%",
-        path : "/static/editor.md/lib/",
-        toolbar : true,
-        placeholder : "本编辑器支持 Markdown 编辑，左边编写，右边预览。",
-        imageUpload : true,
-        imageFormats : ["jpg", "jpeg", "gif", "png", "JPG", "JPEG", "GIF", "PNG"],
-        imageUploadURL : window.imageUploadURL,
-        toolbarModes : "full",
-        fileUpload : true,
-        fileUploadURL : window.fileUploadURL,
-        taskList : true,
-        flowChart : true,
-        htmlDecode : "style,script,iframe,title,onmouseover,onmouseout,style",
-        lineNumbers : false,
-        tocStartLevel : 1,
-        tocm : true,
-        saveHTMLToTextarea : true,
+        width: "100%",
+        height: "100%",
+        path: "/static/editor.md/lib/",
+        toolbar: true,
+        placeholder: "本编辑器支持 Markdown 编辑，左边编写，右边预览。",
+        imageUpload: true,
+        imageFormats: ["jpg", "jpeg", "gif", "png", "JPG", "JPEG", "GIF", "PNG"],
+        imageUploadURL: window.imageUploadURL,
+        toolbarModes: "full",
+        fileUpload: true,
+        fileUploadURL: window.fileUploadURL,
+        taskList: true,
+        flowChart: true,
+        htmlDecode: "style,script,iframe,title,onmouseover,onmouseout,style",
+        lineNumbers: false,
+        tocStartLevel: 1,
+        tocm: true,
+        saveHTMLToTextarea: true,
 
-        onload : function() {
+        onload: function() {
             this.hideToolbar();
             var keyMap = {
-                "Ctrl-S" : function(cm) {
+                "Ctrl-S": function(cm) {
                     saveDocument(false);
                 },
-                "Cmd-S" : function(cm){
+                "Cmd-S": function(cm){
                     saveDocument(false);
                 },
                 "Ctrl-A": function(cm) {
@@ -50,7 +50,7 @@ $(function () {
             uploadImage("docEditor", function ($state, $res) {
                 if ($state === "before") {
                     return layer.load(1, {
-                        shade: [0.1,'#fff'] // 0.1 透明度的白色背景
+                        shade: [0.1, '#fff'] // 0.1 透明度的白色背景
                     });
                 } else if ($state === "success") {
                     if ($res.errcode === 0) {
@@ -60,7 +60,7 @@ $(function () {
                 }
             });
         },
-        onchange : function () {
+        onchange: function () {
             resetEditorChanged(true);
         }
     });
@@ -135,7 +135,7 @@ $(function () {
      */
     window.loadDocument = function($node) {
         var index = layer.load(1, {
-            shade: [0.1,'#fff'] // 0.1 透明度的白色背景
+            shade: [0.1, '#fff'] // 0.1 透明度的白色背景
         });
 
         $.get(window.editURL + $node.node.id ).done(function (res) {
@@ -147,7 +147,7 @@ $(function () {
                 window.editor.clear();
                 window.editor.insertValue(res.data.markdown);
                 window.editor.setCursor({ line : 0, ch : 0 });
-                var node = { "id" : res.data.doc_id, 'parent' : res.data.parent_id === 0 ? '#' : res.data.parent_id, "text" : res.data.doc_name, "identify" : res.data.identify, "version" : res.data.version };
+                var node = { "id": res.data.doc_id, 'parent': res.data.parent_id === 0 ? '#' : res.data.parent_id, "text": res.data.doc_name, "identify": res.data.identify, "version": res.data.version };
                 pushDocumentCategory(node);
                 window.selectNode = node;
                 pushVueLists(res.data.attach);
@@ -187,14 +187,14 @@ $(function () {
             }
         }
         $.ajax({
-            beforeSend  : function () {
-                index = layer.load(1, { shade : [0.1,'#fff'] });
+            beforeSend: function () {
+                index = layer.load(1, { shade: [0.1, '#fff'] });
             },
-            url : window.editURL,
-            data : { "identify" : window.book.identify, "doc_id" : doc_id, "markdown" : content, "html" : html, "cover" : $is_cover ? "yes" : "no", "version" : version },
-            type : "post",
-            dataType : "json",
-            success : function (res) {
+            url: window.editURL,
+            data: { "identify": window.book.identify, "doc_id": doc_id, "markdown": content, "html": html, "cover": $is_cover ? "yes" : "no", "version": version },
+            type: "post",
+            dataType: "json",
+            success: function (res) {
                 layer.close(index);
                 if (res.errcode === 0) {
                     resetEditorChanged(false);
@@ -211,7 +211,7 @@ $(function () {
                     }
                 } else if(res.errcode === 6005) {
                     var confirmIndex = layer.confirm('文档已被其他人修改确定覆盖已存在的文档吗？', {
-                        btn: ['确定','取消'] // 按钮
+                        btn: ['确定', '取消'] // 按钮
                     }, function() {
                         layer.close(confirmIndex);
                         saveDocument(true, callback);
@@ -225,11 +225,11 @@ $(function () {
 
     function releaseBook() {
         $.ajax({
-            url : window.releaseURL,
-            data : { "identify" : window.book.identify },
-            type : "post",
-            dataType : "json",
-            success : function (res) {
+            url: window.releaseURL,
+            data: { "identify": window.book.identify },
+            type: "post",
+            dataType: "json",
+            success: function (res) {
                 if (res.errcode === 0) {
                     layer.msg("发布任务已推送到任务队列，稍后将在后台执行。");
                 } else {
@@ -259,7 +259,7 @@ $(function () {
      * 添加顶级文档
      */
     $("#addDocumentForm").ajaxForm({
-        beforeSubmit : function () {
+        beforeSubmit: function () {
             var doc_name = $.trim($("#documentName").val());
             if (doc_name === "") {
                 return showError("目录名称不能为空", "#add-error-message")
@@ -267,13 +267,13 @@ $(function () {
             $("#btnSaveDocument").button("loading");
             return true;
         },
-        success : function (res) {
+        success: function (res) {
             if (res.errcode === 0) {
-                var data = { "id" : res.data.doc_id, 'parent' : res.data.parent_id === 0 ? '#' : res.data.parent_id , "text" : res.data.doc_name, "identify" : res.data.identify, "version" : res.data.version };
+                var data = { "id": res.data.doc_id, 'parent': res.data.parent_id === 0 ? '#' : res.data.parent_id , "text": res.data.doc_name, "identify": res.data.identify, "version": res.data.version };
 
                 var node = window.treeCatalog.get_node(data.id);
                 if (node) {
-                    window.treeCatalog.rename_node({ "id" : data.id }, data.text);
+                    window.treeCatalog.rename_node({ "id": data.id }, data.text);
                 } else {
                     window.treeCatalog.create_node(data.parent, data);
                     window.treeCatalog.deselect_all();
@@ -293,54 +293,54 @@ $(function () {
      * 文档目录树
      */
     $("#sidebar").jstree({
-        'plugins' : ["wholerow", "types", 'dnd', 'contextmenu'],
-        "types" : {
-            "default" : {
-                "icon" : false  // 删除默认图标
+        'plugins': ["wholerow", "types", 'dnd', 'contextmenu'],
+        "types": {
+            "default": {
+                "icon": false  // 删除默认图标
             }
         },
-        'core' : {
-            'check_callback' : true,
-            "multiple" : false,
-            'animation' : 0,
-            "data" : window.documentCategory
+        'core': {
+            'check_callback': true,
+            "multiple": false,
+            'animation': 0,
+            "data": window.documentCategory
         },
-        "contextmenu" : {
-            show_at_node : false,
-            select_node : false,
-            "items" : {
-                "添加文档" : {
-                    "separator_before" : false,
-                    "separator_after" : true,
-                    "_disabled" : false,
-                    "label" : "添加文档",
-                    "icon" : "fa fa-plus",
-                    "action" : function (data) {
+        "contextmenu": {
+            show_at_node: false,
+            select_node: false,
+            "items": {
+                "添加文档": {
+                    "separator_before": false,
+                    "separator_after": true,
+                    "_disabled": false,
+                    "label": "添加文档",
+                    "icon": "fa fa-plus",
+                    "action": function (data) {
                         var inst = $.jstree.reference(data.reference),
                             node = inst.get_node(data.reference);
 
                         openCreateCatalogDialog(node);
                     }
                 },
-                "编辑" : {
-                    "separator_before" : false,
-                    "separator_after" : true,
-                    "_disabled" : false,
-                    "label" : "编辑",
-                    "icon" : "fa fa-edit",
-                    "action" : function (data) {
+                "编辑": {
+                    "separator_before": false,
+                    "separator_after": true,
+                    "_disabled": false,
+                    "label": "编辑",
+                    "icon": "fa fa-edit",
+                    "action": function (data) {
                         var inst = $.jstree.reference(data.reference);
                         var node = inst.get_node(data.reference);
                         openEditCatalogDialog(node);
                     }
                 },
-                "删除" : {
-                    "separator_before" : false,
-                    "separator_after" : true,
-                    "_disabled" : false,
-                    "label" : "删除",
-                    "icon" : "fa fa-trash-o",
-                    "action" : function (data) {
+                "删除": {
+                    "separator_before": false,
+                    "separator_after": true,
+                    "_disabled": false,
+                    "label": "删除",
+                    "icon": "fa fa-trash-o",
+                    "action": function (data) {
                         var inst = $.jstree.reference(data.reference);
                         var node = inst.get_node(data.reference);
                         openDeleteDocumentDialog(node);
@@ -370,7 +370,7 @@ $(function () {
             window.isLoad = true;
             window.editor.clear();
             window.editor.insertValue(body);
-            window.editor.setCursor({ line : 0, ch : 0 });
+            window.editor.setCursor({ line: 0, ch: 0 });
             resetEditorChanged(true);
         }
         $("#documentTemplateModal").modal('hide');

static/js/splitbar.js

@@ -0,0 +1,176 @@
+$(function () {
+    var splitBar = {
+        // 设置当前屏幕为 840px 时将分割条隐藏
+        maxWidth: 840,
+
+        // 父元素选择器
+        parentSelector: '.manual-body',
+
+        /**
+         * 初始化分割条
+         */
+        init: function () {
+            var self = this;
+            $(self.parentSelector)
+            .append(
+                $('\
+                    <div id="manual-vsplitbar" unselectable="on"\
+                    style="\
+                        z-index:301;\
+                        position: absolute;\
+                        user-select: none;\
+                        cursor: col-resize;\
+                        left: 275px;\
+                        height: 100%;\
+                        display: block;\
+                        width: 3px;\
+                        border-right: 1px solid #8f949a;">\
+                        <a href="javascript:void(0)" accesskey="" tabindex="0" title="vsplitbar"></a>\
+                    </div>\
+                ')
+                .hover(
+                    function (event) {
+                        event.target.style.background = '#8f949ad8';
+                    },
+                    function (event) {
+                        event.target.style.background = '';
+                    }
+                )
+            );
+
+            self.loadingHtml();
+
+            // 设置媒体查询
+            mediaMatcher.set();
+        },
+
+        /**
+         * 加载页面时设置分割条是否显示
+         */ 
+        loadingHtml: function () {
+            var self = this;
+            var htmlWidth = document.body.clientWidth;
+            if (htmlWidth <= self.maxWidth) $('#manual-vsplitbar').css('display', 'none');
+        },
+
+        /**
+         * 在打开关闭菜单事初始化左右窗口和分割条
+         */
+        reset: function () {
+            if (isFullScreen) {
+                // 关闭菜单时，初始化左右窗口
+                $('#manual-vsplitbar').css('display', 'none');
+                splitBar.inMaxWidthReset();
+                $('.manual-left').css('width', '0px');
+            } else {
+                 // 打开菜单时，初始化左右窗口
+                $('#manual-vsplitbar').css('display', 'block');
+                splitBar.outMaxWidthReset();
+            }
+        },
+
+        /**
+         * 屏幕小于等于 840px，重置左右窗口
+         */
+        inMaxWidthReset: function () {
+            $('#manual-vsplitbar').css('display', 'none');
+            $('.m-manual.manual-reader .manual-right').css('left', '0');
+            $('.manual-left').css('width', '280px');
+        },
+
+        /**
+         * 屏幕大于 840px，重置左右窗口
+         */
+        outMaxWidthReset: function () {
+            $('.manual-right').css('left', '279px');
+            $('.manual-left').css('width', '279px');
+            $('#manual-vsplitbar').css('left', '275px').css('display', 'block');
+        }
+    }
+
+    /**
+     * 设置媒体查询
+     * 分割条隐藏
+     */
+    var mediaMatcher = {
+        mql: window.matchMedia('(max-width:' + splitBar.maxWidth + 'px)'),
+
+        /**
+         * 添加媒体查询监听事件
+         */ 
+        set: function () {
+            var self = this;
+            self.mql.addListener(self.mqCallback);
+        },
+
+        /**
+         * 删除媒体查询监听事件
+         */
+        remove: function () {
+            var self = this;
+            self.mql.removeListener(self.mqCallback);
+        },
+
+        /**
+         * 媒体查询回调函数
+         */
+        mqCallback: function (event) {
+            if (event.target.matches) { // 宽度小于等于 840 像素
+                $(".m-manual").removeClass('manual-fullscreen-active');
+                splitBar.inMaxWidthReset();
+            } else {                    // 宽度大于 840 像素
+                splitBar.outMaxWidthReset();
+            }
+        }
+    }
+
+    // 初始化分割条
+    splitBar.init();
+    
+    /**
+     * 控制菜单宽度
+     * 最小为 140px
+     */
+    $('#manual-vsplitbar').on('mousedown', function (e) {
+        var bodyEle = $('.manual-body')[0];
+
+        var leftPane = $('.manual-left')[0];
+        var splitBar = $('#manual-vsplitbar')[0];
+        var rightPane = $('.manual-right')[0];
+
+        var disX = (e || event).clientX;
+
+        splitBar.left = splitBar.offsetLeft;
+
+        var docMouseMove = document.onmousemove;
+        var docMouseUp = document.onmouseup;
+
+        document.onmousemove = function (e) {
+            var curPos = splitBar.left + ((e || event).clientX - disX);
+            var maxPos = bodyEle.clientWidth - splitBar.offsetWidth;
+
+            curPos > maxPos && (curPos = maxPos);
+            curPos < 140 && (curPos = 140);
+
+            leftPane.style.width = curPos + "px";
+            splitBar.style.left = curPos - 3 + "px";
+            rightPane.style.left = curPos + 3 + "px";
+
+            return false;
+        }
+
+        document.onmouseup = function () {
+            document.onmousemove = docMouseMove;
+            document.onmouseup = docMouseUp;
+            splitBar.releaseCapture && splitBar.releaseCapture();
+        };
+
+        splitBar.setCapture && splitBar.setCapture();
+        return false;
+    });
+
+    /**
+     * 关闭侧边栏时，同步分割条；
+     */
+    $(".manual-fullscreen-switch").on("click", splitBar.reset);
+});

views/document/default_read.tpl

@@ -230,11 +230,12 @@
 <script src="{{cdnjs "/static/bootstrap/js/bootstrap.min.js"}}"></script>
 <script src="{{cdnjs "/static/js/jquery.form.js"}}" type="text/javascript"></script>
 <script src="{{cdnjs "/static/jstree/3.3.4/jstree.min.js"}}" type="text/javascript"></script>
-<script type="text/javascript" src="{{cdnjs "/static/nprogress/nprogress.js"}}"></script>
-<script type="text/javascript" src="{{cdnjs "/static/highlight/highlight.js"}}"></script>
-<script type="text/javascript" src="{{cdnjs "/static/highlight/highlightjs-line-numbers.min.js"}}"></script>
-<script type="text/javascript" src="/static/js/jquery.highlight.js"></script>
-<script type="text/javascript" src="/static/js/kancloud.js"></script>
+<script src="{{cdnjs "/static/nprogress/nprogress.js"}}" type="text/javascript"></script>
+<script src="{{cdnjs "/static/highlight/highlight.js"}}" type="text/javascript"></script>
+<script src="{{cdnjs "/static/highlight/highlightjs-line-numbers.min.js"}}" type="text/javascript"></script>
+<script src="/static/js/jquery.highlight.js" type="text/javascript"></script>
+<script src="/static/js/kancloud.js" type="text/javascript"></script>
+<script src="/static/js/splitbar.js" type="text/javascript"></script>
 <script type="text/javascript">
 active_book_id = {{.Model.Identify}};
 active_doc_id = {{.DocumentId}};