feat: 更新 editor.md 的图片上传功能:支持用户自定义 imageUploadURL

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;
                         };

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",