From 75314c2aed276d159c2fca57d8b8e4d47cca062c Mon Sep 17 00:00:00 2001
From: Frankie Huang <frankie@FrankiedeMacBook-Pro.local>
Date: Mon, 7 Apr 2025 13:30:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20editor.md=20?=
 =?UTF-8?q?=E7=9A=84=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?:=E6=94=AF=E6=8C=81=E7=94=A8=E6=88=B7=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=20imageUploadURL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plugins/image-dialog/image-dialog.js      | 38 +++++++++++++++++--
 src/components/MarkdownEditor.vue             | 24 ++++++++++--
 2 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/public/static/editor.md/plugins/image-dialog/image-dialog.js b/public/static/editor.md/plugins/image-dialog/image-dialog.js
index 4f6ecda..88fae3e 100644
--- a/public/static/editor.md/plugins/image-dialog/image-dialog.js
+++ b/public/static/editor.md/plugins/image-dialog/image-dialog.js
@@ -47,9 +47,17 @@
                 }
 
                 var imageFileName = classPrefix + "image-file";
-                // 删除 method="post" 让表单不会触发提交。后面使用 ajax 重写图片上传请求
-                var dialogContent = ( (settings.imageUpload) ? "<form action=\"" + action +"\" target=\"" + iframeName + "\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
+                // 将 action 置为 # 号。后面使用 ajax 重写图片上传请求
+                var dialogContent = ( (settings.imageUpload) ? "<form action=\"#\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
                                         ( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +
+                                        // [begin] add by Frankie. for change imageUploadURL
+                                        ( (settings.imageUpload) ? "<label>Service</label><input type=\"text\" id=\"upload-url-input\" title=\"" + settings.imageUploadURL + "\" placeholder=\"" + settings.imageUploadURL + "\" disabled />" : "" ) +
+                                        (function() {
+                                            return (settings.imageUpload) ? "<div style=\"margin-left: 8px; display: inline-block\">" +
+                                                                                "<button type=\"button\" id=\"lock-or-unlock\">Unlock</button>" +
+                                                                            "</div><br/>" : "";
+                                        })() +
+                                        // [end] add by Frankie.
                                         "<label>" + imageLang.url + "</label>" +
                                         "<input type=\"text\" data-url />" + (function(){
                                             return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
@@ -72,7 +80,7 @@
                 dialog = this.createDialog({
                     title      : imageLang.title,
                     width      : (settings.imageUpload) ? 465 : 380,
-                    height     : 254,
+                    height     : (settings.imageUpload) ? 304 : 254,
                     name       : dialogName,
                     content    : dialogContent,
                     mask       : settings.dialogShowMask,
@@ -134,6 +142,27 @@
                     return ;
                 }
 
+                // 给按钮绑定事件，支持手动更新 settings.imageUploadURL
+                $('#lock-or-unlock').on('click', function() {
+                    let uploadURLInput = $('#upload-url-input')
+                    if (uploadURLInput.attr('disabled') == undefined) {
+                        // 如果输入框未被禁用，则禁用按钮
+                        $(this).text('Unlock');
+                        uploadURLInput.attr('disabled', 'disabled');
+                        // 用输入框内容更新 imageUploadURL
+                        if (uploadURLInput.val().trim().length > 0) {
+                            settings.imageUploadURL = uploadURLInput.val().trim()
+                            // 触发回调事件，支持向上暴露
+                            settings.imageUploadURLChange(settings.imageUploadURL)
+                        }
+                    } else {
+                        // 如果输入框为禁用状态，则解锁输入框
+                        $(this).text('Update');
+                        uploadURLInput.removeAttr('disabled');
+                        uploadURLInput.trigger('focus')
+                    }
+                })
+
 				var fileInput  = dialog.find("[name=\"" + imageFileName + "\"]");
 
 				fileInput.bind("change", function() {
@@ -202,6 +231,9 @@
                                         alert(data.message);
                                     }
                                 },
+                                error: function(xhr) {
+                                    alert("Upload image failed. HTTP Status Code: " + xhr.status);
+                                },
                             });
                             return false;
                         };
diff --git a/src/components/MarkdownEditor.vue b/src/components/MarkdownEditor.vue
index b1deaaa..760b2e9 100644
--- a/src/components/MarkdownEditor.vue
+++ b/src/components/MarkdownEditor.vue
@@ -33,12 +33,26 @@ export default {
             required: false,
             default: '720px'
         },
-        // 默认不开启本地上传，除非提供图片上传的后端接口
+        // 默认不开启本地上传
+        imageUpload: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        // 提供图片上传的后端接口
         imageUploadURL: {
             type: String,
             required: false,
             default: ''
         },
+        // 当 image-dialog 插件更新 imageUploadURL 时触发
+        imageUploadURLChange: {
+            type: Function,
+            required: false,
+            default: (newURL) => {
+                console.log("new imageUploadURL: " + newURL)
+            }
+        },
         // 编辑器加载完成后，执行该函数
         onload: {
             type: Function,
@@ -109,9 +123,13 @@ export default {
                         taskList: true,
 
                         // 定义图片本地上传的功能
-                        imageUpload: vm.imageUploadURL == '' ? false : true, // 支持图片本地上传，需要定义 imageUploadURL
+                        imageUpload: vm.imageUpload, // 支持图片本地上传。若不提供 imageUploadURL 则需要用户自行设定
                         imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp", "ico"],
-                        imageUploadURL: vm.imageUploadURL, // 需在服务端定义接口
+                        imageUploadURL: vm.imageUploadURL, // 可用于上传图片的服务端接口
+                        imageUploadURLChange: function (newURL) {
+                            // 当 image-dialog 插件更新 imageUploadURL 时触发
+                            vm.imageUploadURLChange(newURL)
+                        },
 
                         // 可分区域定制样式主题
                         // theme: (localStorage.theme) ? localStorage.theme : "dark",