" ) +
( (settings.imageUpload) ? "
" : "" ) +
+ // [begin] add by Frankie. for change imageUploadURL
+ ( (settings.imageUpload) ? "
" : "" ) +
+ (function() {
+ return (settings.imageUpload) ? "
" +
+ "" +
+ "
" : "";
+ })() +
+ // [end] add by Frankie.
"
" +
"
" + (function(){
return (settings.imageUpload) ? "
" +
@@ -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",