功能优化和新增 (#956)

* feat: 首页项目拖拽排序功能

* feat: 增加首页项目拖拽排序增加只能管理员进行, 排序失败元素回到原本位置

* perf: 新建文章以后直接进入到编辑文章页面

* perf: 优化文档打开时或刷新时样式闪动问题

* perf: 优化表格样式

* feat: 支持上传视频功能

* feat: 视频样式调整

* feat: 直接粘贴视频上传功能

* perf: 优化markdown目录显示

static/css/markdown.preview.css

@@ -20,7 +20,8 @@
     width: 100%;
     overflow: auto;
     border-bottom: none;
-    line-height: 1.5
+    line-height: 1.5;
+    display: table;
 }
 
 .editormd-preview-container table td,.editormd-preview-container table th {
@@ -50,30 +51,43 @@
     width: 100%;
 }
 
+.whole-article-wrap {
+    display: flex;
+    flex-direction: column;
+}
+
 .article-body .markdown-toc{
     position: fixed;
-    right: 0;
+    right: 50px;
     width: 260px;
     font-size: 12px;
-    margin-top: -70px;
     overflow: auto;
-    margin-right: 50px;
+    border: 1px solid #e8e8e8;
+    border-radius: 6px;
 }
 .markdown-toc ul{
     list-style:none;
 }
+
+.markdown-toc-list {
+    padding:20px 0 !important;
+    margin-bottom: 0 !important;
+}
+
 .markdown-toc .markdown-toc-list>li{
     padding: 3px 10px 3px 16px;
     line-height: 18px;
-    border-left: 2px solid #e8e8e8;
+    /*border-left: 2px solid #e8e8e8;*/
     color: #595959;
+    margin-left: -2px;
 }
 .markdown-toc .markdown-toc-list>li.active{
     border-right: 2px solid #25b864;
 }
 
 .article-body .markdown-article{
-    margin-right: 250px;
+    width: calc(100% - 260px);
+    /*margin-right: 250px;*/
 }
 .article-body.content .markdown-toc{
     position: relative;
@@ -86,7 +100,7 @@
 .markdown-toc-list .directory-item {
     padding: 3px 10px 3px 16px;
     line-height: 18px;
-    border-left: 2px solid #e8e8e8;
+    /*border-left: 2px solid #e8e8e8;*/
     color: #595959;
 }
 .markdown-toc-list .directory-item-link {

static/editor.md/css/editormd.css

@@ -3594,7 +3594,7 @@
   background-color: #f8f8f8;
 }
 
-.markdown-body img {
+.markdown-body img, .markdown-body video {
   max-width: 100%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

static/editor.md/css/editormd.preview.css

@@ -2878,7 +2878,8 @@
   background-color: #f8f8f8;
 }
 
-.markdown-body img {
+
+.markdown-body img, .markdown-body video {
   max-width: 100%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

static/js/editor.js

@@ -437,6 +437,85 @@ function uploadImage($id, $callback) {
     });
 }
 
+
+function uploadResource($id, $callback) {
+    locales = {
+        'zh-CN': {
+            unsupportType: '不支持的图片/视频格式',
+            uploadFailed: '图片/视频上传失败'
+        },
+        'en': {
+            unsupportType: 'Unsupport image/video type',
+            uploadFailed: 'Upload image/video failed'
+        }
+    }
+    /** 粘贴上传的资源 **/
+    document.getElementById($id).addEventListener('paste', function (e) {
+        if (e.clipboardData && e.clipboardData.items) {
+            var clipboard = e.clipboardData;
+            for (var i = 0, len = clipboard.items.length; i < len; i++) {
+                if (clipboard.items[i].kind === 'file' || clipboard.items[i].type.indexOf('image') > -1) {
+
+                    var resource = clipboard.items[i].getAsFile();
+
+                    var fileName = String((new Date()).valueOf());
+                    console.log(resource.type)
+                    switch (resource.type) {
+                        case "image/png" :
+                            fileName += ".png";
+                            break;
+                        case "image/jpg" :
+                            fileName += ".jpg";
+                            break;
+                        case "image/jpeg" :
+                            fileName += ".jpeg";
+                            break;
+                        case "image/gif" :
+                            fileName += ".gif";
+                            break;
+                        case "video/mp4":
+                            fileName += ".mp4";
+                            break;
+                        case "video/webm":
+                            fileName += ".webm";
+                            break;
+                        default :
+                            layer.msg(locales[lang].unsupportType);
+                            return;
+                    }
+                    var form = new FormData();
+
+                    form.append('editormd-resource-file', resource, fileName);
+
+                    var layerIndex = 0;
+
+                    $.ajax({
+                        url: window.imageUploadURL,
+                        type: "POST",
+                        dataType: "json",
+                        data: form,
+                        processData: false,
+                        contentType: false,
+                        beforeSend: function () {
+                            layerIndex = $callback('before');
+                        },
+                        error: function () {
+                            layer.close(layerIndex);
+                            $callback('error');
+                            layer.msg(locales[lang].uploadFailed);
+                        },
+                        success: function (data) {
+                            layer.close(layerIndex);
+                            $callback('success', data);
+                        }
+                    });
+                    e.preventDefault();
+                }
+            }
+        }
+    });
+}
+
 /**
  * 初始化代码高亮
  */

static/js/kancloud.js

@@ -143,9 +143,7 @@ function renderPage($data) {
     $("#doc_id").val($data.doc_id);
     if ($data.page) {
         loadComment($data.page, $data.doc_id);
-
-    }
-    else {
+    } else {
         pageClicked(-1, $data.doc_id);
     }
 
@@ -156,6 +154,7 @@ function renderPage($data) {
         $("#view_container").removeClass("theme__dark theme__green theme__light theme__red theme__default")
         $("#view_container").addClass($data.markdown_theme)
     }
+    checkMarkdownTocElement();
 }
 
 /***
@@ -230,6 +229,7 @@ function initHighlighting() {
 }
 
 $(function () {
+    checkMarkdownTocElement();
     $(".view-backtop").on("click", function () {
         $('.manual-right').animate({ scrollTop: '0px' }, 200);
     });
@@ -280,7 +280,7 @@ $(function () {
 
 
     $(window).resize(function (e) {
-        var h = $(".manual-catalog").innerHeight() - 20;
+        var h = $(".manual-catalog").innerHeight() - 50;
         $(".markdown-toc").height(h);
     }).resize();
 
@@ -417,4 +417,19 @@ function loadCopySnippets() {
     [].forEach.call(snippets, function (snippet) {
         Prism.highlightElement(snippet);
     });
+}
+
+function checkMarkdownTocElement() {
+    console.log(111)
+    let toc = $(".markdown-toc-list");
+    let articleComment = $("#articleComment");
+    if (toc.length) {
+        $(".wiki-bottom-left").css("width", "calc(100% - 260px)");
+        articleComment.css("width", "calc(100% - 260px)");
+        articleComment.css("margin", "30px 0 70px 0");
+    } else {
+        $(".wiki-bottom-left").css("width", "100%");
+        articleComment.css("width", "100%");
+        articleComment.css("margin", "30px auto 70px auto;");
+    }
 }

static/js/markdown.js

@@ -245,18 +245,22 @@ $(function () {
 
             //如果没有选中节点则选中默认节点
             openLastSelectedNode();
-            uploadImage("docEditor", function ($state, $res) {
+            uploadResource("docEditor", function ($state, $res) {
                 if ($state === "before") {
                     return layer.load(1, {
                         shade: [0.1, '#fff'] // 0.1 透明度的白色背景
                     });
                 } else if ($state === "success") {
-                    // if ($res.errcode === 0) {
-                        // var value = '![](' + $res.url + ')';
-                    // 3xxx 20240602
-                    if ($res[0].errcode === 0) {
-                        var value = '![](' + $res[0].url + ')';
-                        window.editor.insertValue(value);
+                    if ($res.errcode === 0) {
+                        if ($res.resource_type === 'video') {
+                            let value = `<video controls><source src="${$res.url}" type="video/mp4"></video>`;
+                            window.editor.insertValue(value);
+                        } else {
+                            let value = '![](' + $res.url + ')';
+                            window.editor.insertValue(value);
+                        }
+                    } else {
+                        layer.msg("上传失败：" + $res.message);
                     }
                 }
             });