cherry markdown支持上传图片pdf以及word (#936)

jh244212647 · zhangsheng.93 · web-flow · commit c810f81fc1c6 · 2024-04-19T13:18:14.000+08:00
* fix: first open document, cherryMarkdown not have theme

* fix: modify prismjs style and improve image clarity

* update cherry-markdown

* optimiztion: cherry-markdown

* feat: cherry-markdown add auto-save and update icon

* fix: the mobile phone displays abnormally and Markdown does not allow conversion

* fix: cherry display not complete

* support upload pdf&amp;word&amp;picture

* support upload pdf&amp;word&amp;picture

---------

Co-authored-by: zhangsheng.93 &lt;zhangsheng.93@bytedance.com&gt;
diff --git a/static/css/markdown.css b/static/css/markdown.css
@@ -454,6 +454,10 @@ body .scrollbar-track-color {
     overflow-y: auto;
 }
 
+.markdown-category .editor-status.markdown-tree {
+    bottom: 30px !important;
+}
+
 .markdown-category .markdown-nav .nav-item {
     font-size: 14px;
     padding: 0 9px;
@@ -566,7 +570,7 @@ iframe.cherry-dialog-iframe {
 }
 
 @media screen and (max-width: 839px) {
-  .toc {
-    display: none !important;
-  }
-}
+    .toc {
+        display: none !important;
+    }
+}
diff --git a/static/js/cherry_markdown.js b/static/js/cherry_markdown.js
@@ -140,6 +140,7 @@ $(function () {
             MathJax: window.MathJax,
         },
         isPreviewOnly: false,
+        fileUpload: myFileUpload,
         engine: {
             global: {
                 urlProcessor(url, srcType) {
@@ -261,19 +262,6 @@ $(function () {
             resetEditorChanged(true);
         });
         openLastSelectedNode();
-        uploadImage("manualEditorContainer", function ($state, $res) {
-            console.log("注册上传图片")
-            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 + ')';
-                    window.editor.insertValue(value);
-                }
-            }
-        });
     });
 
     /***
@@ -519,6 +507,7 @@ $(function () {
             }
         },
         'core': {
+            'worker':true,
             'check_callback': true,
             "multiple": false,
             'animation': 0,
@@ -614,77 +603,36 @@ $(function () {
     });
 });
 
-function uploadImage($id, $callback) {
-    locales = {
-        'zh-CN': {
-            unsupportType: '不支持的图片格式',
-            uploadFailed: '图片上传失败'
+function myFileUpload(file, callback) {
+    // 创建 FormData 对象以便包含要上传的文件
+    var formData = new FormData();
+    formData.append("editormd-file-file", file); // "file" 是与你的服务端接口相对应的字段名
+    var layerIndex = 0;
+    // AJAX 请求
+    $.ajax({
+        url: window.fileUploadURL, // 确保此 URL 是文件上传 API 的正确 URL
+        type: "POST",
+        dataType: "json",
+        data: formData,
+        processData: false, // 必须设置为 false，因为数据是 FormData 对象，不需要对数据进行序列化处理
+        contentType: false, // 必须设置为 false，因为是 FormData 对象，jQuery 将不会设置内容类型头
+        
+        beforeSend: function () {
+            layerIndex = layer.load(1, {
+                shade: [0.1, '#fff'] // 0.1 透明度的白色背景
+            });
         },
-        'en': {
-            unsupportType: 'Unsupport image type',
-            uploadFailed: 'Upload image 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 imageFile = clipboard.items[i].getAsFile();
-
-                    var fileName = String((new Date()).valueOf());
-
-                    switch (imageFile.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;
-                        default :
-                            layer.msg(locales[lang].unsupportType);
-                            return;
-                    }
-                    var form = new FormData();
-
-                    form.append('editormd-image-file', imageFile, 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);
-                            if (data.errcode !== 0) {
-                                layer.msg(data.message);
-                            }
-
-                        }
-                    });
-                    e.preventDefault();
-                }
+        
+        error: function () {
+            layer.close(layerIndex);
+            layer.msg(locales[lang].uploadFailed);
+        },
+        success: function (data) {
+            layer.close(layerIndex);
+            if (data.errcode !== 0) {
+                layer.msg(data.message);
+            } else {
+                callback(data.url); // 假设返回的 JSON 中包含上传文件的 URL，调用回调函数并传入 URL
             }
         }
     });
diff --git a/views/document/cherry_markdown_edit_template.tpl b/views/document/cherry_markdown_edit_template.tpl
@@ -64,16 +64,13 @@
                 <div class="nav-plus pull-right" id="btnAddDocument" data-toggle="tooltip" data-title="{{i18n .Lang "doc.create_doc"}}" data-direction="right"><i class="fa fa-plus" aria-hidden="true"></i></div>
                 <div class="clearfix"></div>
             </div>
-            <div class="markdown-tree" id="sidebar"> </div>
-        </div>
-        <div class="markdown-editor-container" id="manualEditorContainer" style="min-width: 920px;">
-            <div class="markdown-editormd">
-                <div id="docEditor" class="markdown-editormd-active"></div>
-            </div>
+            <div class="markdown-tree editor-status" id="sidebar"> </div>
             <div class="markdown-editor-status">
                 <div id="attachInfo" class="item">0 {{i18n .Lang "doc.attachments"}}</div>
             </div>
         </div>
+        <div class="markdown-editor-container" id="manualEditorContainer" style="min-width: 920px;">            
+        </div>
 
     </div>
 </div>
