From 4d3a06f8cd924f5afda467ba68b8a3bc7ca7dcde Mon Sep 17 00:00:00 2001 From: xlxiang <528405129@qq.com> Date: Fri, 29 May 2020 14:58:46 +0800 Subject: [PATCH 1/2] fix --- Pipfile | 1 + .../js/plugins/image-dialog/image-dialog.js | 360 +++++++++--------- 2 files changed, 191 insertions(+), 170 deletions(-) diff --git a/Pipfile b/Pipfile index 54b012e..ce7af24 100644 --- a/Pipfile +++ b/Pipfile @@ -4,6 +4,7 @@ verify_ssl = true name = "pypi" [packages] +pillow="6.0" django = "==2.2.10" django-mdeditor = "*" diff --git a/mdeditor/static/mdeditor/js/plugins/image-dialog/image-dialog.js b/mdeditor/static/mdeditor/js/plugins/image-dialog/image-dialog.js index 2d7b42c..9ae4b73 100755 --- a/mdeditor/static/mdeditor/js/plugins/image-dialog/image-dialog.js +++ b/mdeditor/static/mdeditor/js/plugins/image-dialog/image-dialog.js @@ -9,117 +9,121 @@ * @license MIT */ -(function() { +(function () { var factory = function (exports) { - var pluginName = "image-dialog"; + var pluginName = "image-dialog"; - exports.fn.imageDialog = function() { + exports.fn.imageDialog = function () { - var _this = this; - var cm = this.cm; - var lang = this.lang; - var editor = this.editor; - var settings = this.settings; - var cursor = cm.getCursor(); - var selection = cm.getSelection(); - var imageLang = lang.dialog.image; + var _this = this; + var cm = this.cm; + var lang = this.lang; + var editor = this.editor; + var settings = this.settings; + var cursor = cm.getCursor(); + var selection = cm.getSelection(); + var imageLang = lang.dialog.image; var classPrefix = this.classPrefix; - var iframeName = classPrefix + "image-iframe"; - var dialogName = classPrefix + pluginName, dialog; - var img_width = "img_width"; - var img_height = "img_height"; - var img_per = "img_per"; - var img_qua = "img_qua"; - - imageLang.width=imageLang.width?imageLang.width:"宽"; - imageLang.height=imageLang.height?imageLang.height:"高"; - imageLang.scaling=imageLang.scaling?imageLang.scaling:"缩放"; - imageLang.quality=imageLang.quality?imageLang.quality:"质量(小于95)"; - - cm.focus(); - - var loading = function(show) { + var iframeName = classPrefix + "image-iframe"; + var dialogName = classPrefix + pluginName, dialog; + var img_width = "img_width"; + var img_height = "img_height"; + var img_scaling = "img_scaling"; + var img_quality = "img_quality"; + //设定默认值 + var width_default = 0; + var height_default = 0; + //默认不缩放 + var scaling_default = 1; + var quality_default = 75; + + imageLang.width = imageLang.width ? imageLang.width : "宽"; + imageLang.height = imageLang.height ? imageLang.height : "高"; + imageLang.scaling = imageLang.scaling ? imageLang.scaling : "缩放"; + imageLang.quality = imageLang.quality ? imageLang.quality : "质量(小于95)"; + + + cm.focus(); + + var loading = function (show) { var _loading = dialog.find("." + classPrefix + "dialog-mask"); _loading[(show) ? "show" : "hide"](); }; - if (editor.find("." + dialogName).length < 1) - { - var guid = (new Date).getTime(); + if (editor.find("." + dialogName).length < 1) { + var guid = (new Date).getTime(); var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid; - if (settings.crossDomainUpload) - { + if (settings.crossDomainUpload) { action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid; } - - var dialogContent = ( (settings.imageUpload) ? "
" : "
" ) + - ( (settings.imageUpload) ? "" : "" ) + - "" + - ""+ (function(){ - return (settings.imageUpload) ? "
" + - "" + - "" + - "
" : ""; - })() + - "
" + - "" + - "" + - "
" + - "" + - "" + - "
" + - "" + - "" + - "
" + - "" + - "" + - "
" + - "" + - "" + - "
" + - "" + - "" + - ( (settings.imageUpload) ? "" : "
"); + var imgParam = "&imgWidth=" + width_default + "&imgHeight=" + height_default + "&imgPer=" + scaling_default + "&imgQua=" + quality_default; + + var dialogContent = ((settings.imageUpload) ? "
" : "
") + + + "" + + "" + + "
" + + "" + + "" + + "
" + + "" + + "" + + "
" + + "" + + "" + + "
" + + "" + + "" + + "
" + + "" + + "
" + + + ((settings.imageUpload) ? "" : "") + + "" + + "" + (function () { + return (settings.imageUpload) ? "
" + + "" + + "" + + "
" : ""; + })() + + "
" + + ((settings.imageUpload) ? "" : "
"); //var imageFooterHTML = ""; dialog = this.createDialog({ - title : imageLang.title, - width : (settings.imageUpload) ? 465 : 380, - height : 430, - name : dialogName, - content : dialogContent, - mask : settings.dialogShowMask, - drag : settings.dialogDraggable, - lockScreen : settings.dialogLockScreen, - maskStyle : { - opacity : settings.dialogMaskOpacity, - backgroundColor : settings.dialogMaskBgColor + title: imageLang.title, + width: (settings.imageUpload) ? 465 : 380, + height: 430, + name: dialogName, + content: dialogContent, + mask: settings.dialogShowMask, + drag: settings.dialogDraggable, + lockScreen: settings.dialogLockScreen, + maskStyle: { + opacity: settings.dialogMaskOpacity, + backgroundColor: settings.dialogMaskBgColor }, - buttons : { - enter : [lang.buttons.enter, function() { - var url = this.find("[data-url]").val(); - var alt = this.find("[data-alt]").val(); + buttons: { + enter: [lang.buttons.enter, function () { + var url = this.find("[data-url]").val(); + var alt = this.find("[data-alt]").val(); var link = this.find("[data-link]").val(); - - if (url === "") - { + dialog.find("#form").attr("action", action + imgParam); + if (url === "") { alert(imageLang.imageURLEmpty); return false; } - var altAttr = (alt !== "") ? " \"" + alt + "\"" : ""; + var altAttr = (alt !== "") ? " \"" + alt + "\"" : ""; - if (link === "" || link === "http://") - { + if (link === "" || link === "http://") { cm.replaceSelection("![" + alt + "](" + url + altAttr + ")"); - } - else - { + } else { cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")"); } @@ -132,147 +136,163 @@ return false; }], - cancel : [lang.buttons.cancel, function() { + cancel: [lang.buttons.cancel, function () { this.hide().lockScreen(false).hideMask(); - + dialog.find("#form").attr("action", action + imgParam); return false; }] } }); + //document.getElementById("form").action = action + "&imgWidth=" + width_default + "&imgHeight=" + height_default + "&imgPer=" + scaling_default + "&imgQua=" + quality_default; + dialog.attr("id", classPrefix + "image-dialog-" + guid); - if (!settings.imageUpload) { - return ; + if (!settings.imageUpload) { + return; } - var fileInput = dialog.find("[name=\"" + classPrefix + "image-file\"]"); + var fileInput = dialog.find("[name=\"" + classPrefix + "image-file\"]"); + var img_width_val = document.getElementById(img_width).value ? document.getElementById(img_width).value : width_default; + var img_height_val = document.getElementById(img_height).value ? document.getElementById(img_height).value : height_default; + var img_scaling_val = document.getElementById(img_scaling).value ? document.getElementById(img_scaling).value : scaling_default; + var img_quality_val = document.getElementById(img_quality).value ? document.getElementById(img_quality).value : quality_default; + dialog.find("#" + img_width).bind("blur", function (e) { + img_width_val = resizeImg(img_width, width_default, action); + document.getElementById("form").action = action + "&imgWidth=" + img_width_val + "&imgHeight=" + img_height_val + "&imgPer=" + img_scaling_val + "&imgQua=" + img_quality_val; - var img_width_val = document.getElementById(img_width).value?document.getElementById(img_width).value:0; - var img_height_val = document.getElementById(img_height).value?document.getElementById(img_height).value:0; - var img_per_val = document.getElementById(img_per).value?document.getElementById(img_per).value:1; - var img_qua_val = document.getElementById(img_qua).value?document.getElementById(img_qua).value:75; - dialog.find("#"+img_width).bind("keyup",function(e){ - - if(e.keyCode>=48&&e.keyCode<=57||e.keyCode==8) - img_width_val = document.getElementById(img_width).value; - else{ - document.getElementById(img_width).value=img_width_val; - } - - document.getElementById("form").action=action+"&imgWidth="+img_width_val+"&imgHeight="+img_height_val+"&imgPer="+img_per_val+"&imgQua="+img_qua_val; - }); + }); - dialog.find("#"+img_height).bind("keyup",function(e){ + dialog.find("#" + img_height).bind("blur", function () { + img_height_val = resizeImg(img_height, height_default, action); + document.getElementById("form").action = action + "&imgWidth=" + img_width_val + "&imgHeight=" + img_height_val + "&imgPer=" + img_scaling_val + "&imgQua=" + img_quality_val; - if(e.keyCode>=48&&e.keyCode<=57||e.keyCode==8) - img_height_val = document.getElementById(img_height).value - else{ - document.getElementById(img_height).value=img_height_val; - } - document.getElementById("form").action=action+"&imgWidth="+img_width_val+"&imgHeight="+img_height_val+"&imgPer="+img_per_val+"&imgQua="+img_qua_val; - }); + }); - dialog.find("#"+img_per).bind("keyup",function(e){ + dialog.find("#" + img_scaling).bind("blur", function (e) { + img_scaling_val = resizeImg(img_scaling, scaling_default, action); + document.getElementById("form").action = action + "&imgWidth=" + img_width_val + "&imgHeight=" + img_height_val + "&imgPer=" + img_scaling_val + "&imgQua=" + img_quality_val; - img_per_val = document.getElementById(img_per).value - document.getElementById("form").action=action+"&imgWidth="+img_width_val+"&imgHeight="+img_height_val+"&imgPer="+img_per_val+"&imgQua="+img_qua_val; - }) - dialog.find("#"+img_qua).bind("keyup",function(e){ + }); + dialog.find("#" + img_quality).bind("blur", function (e) { + img_quality_val = resizeImg(img_quality, quality_default, action); + document.getElementById("form").action = action + "&imgWidth=" + img_width_val + "&imgHeight=" + img_height_val + "&imgPer=" + img_scaling_val + "&imgQua=" + img_quality_val; - img_qua_val = document.getElementById(img_qua).value - document.getElementById("form").action=action+"&imgWidth="+img_width_val+"&imgHeight="+img_height_val+"&imgPer="+img_per_val+"&imgQua="+img_qua_val; - }) - fileInput.bind("change", function() { - var fileName = fileInput.val(); - var isImage = new RegExp("(\\.(" + settings.imageFormats.join("|") + "))$"); // /(\.(webp|jpg|jpeg|gif|bmp|png))$/ + }); - if (fileName === "") - { - alert(imageLang.uploadFileEmpty); + fileInput.bind("change", function () { + var fileName = fileInput.val(); + var isImage = new RegExp("(\\.(" + settings.imageFormats.join("|") + "))$"); // /(\.(webp|jpg|jpeg|gif|bmp|png))$/ + if (fileName === "") { + alert(imageLang.uploadFileEmpty); return false; - } + } - if (!isImage.test(fileName)) - { - alert(imageLang.formatNotAllowed + settings.imageFormats.join(", ")); + if (!isImage.test(fileName)) { + alert(imageLang.formatNotAllowed + settings.imageFormats.join(", ")); return false; - } - + } loading(true); - var submitHandler = function() { + var submitHandler = function () { var uploadIframe = document.getElementById(iframeName); - uploadIframe.onload = function() { + uploadIframe.onload = function () { loading(false); var body = (uploadIframe.contentWindow ? uploadIframe.contentWindow : uploadIframe.contentDocument).document.body; - var json = (body.innerText) ? body.innerText : ( (body.textContent) ? body.textContent : null); + var json = (body.innerText) ? body.innerText : ((body.textContent) ? body.textContent : null); json = (typeof JSON.parse !== "undefined") ? JSON.parse(json) : eval("(" + json + ")"); - if(!settings.crossDomainUpload) - { - if (json.success === 1) - { - dialog.find("[data-url]").val(json.url); - } - else - { - alert(json.message); - } + if (!settings.crossDomainUpload) { + if (json.success === 1) { + dialog.find("[data-url]").val(json.url); + } else { + alert(json.message); + } } - document.getElementById("form").action=action+"&imgWidth="+0+"&imgHeight="+0+"&imgPer="+1+"&imgQua="+75; + /* dialog.find("#" + img_width).val(width_default); + dialog.find("#" + img_height).val(height__default); + dialog.find("#" + img_scaling).val(scaling_default); + dialog.find("#" + img_quality).val(quality_default); + document.getElementById("form").action = action + "&imgWidth=" + 0 + "&imgHeight=" + 0 + "&imgPer=" + 1 + "&imgQua=" + 75; + + */ return false; }; }; dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click"); - // dialog.find(".editormd-enter-btn").bind("click", submitHandler).trigger("click"); - }); + + // dialog.find(".editormd-enter-btn").bind("click", submitHandler).trigger("click"); + }); } - dialog = editor.find("." + dialogName); - dialog.find("[type=\"text\"]").val(""); - dialog.find("[type=\"file\"]").val(""); - dialog.find("[data-link]").val("http://"); + dialog = editor.find("." + dialogName); + dialog.find("[type=\"text\"]").val(""); + dialog.find("[type=\"file\"]").val(""); + dialog.find("[data-link]").val("http://"); + dialog.find("#" + img_width).val(width_default); + dialog.find("#" + img_height).val(height_default); + dialog.find("#" + img_scaling).val(scaling_default); + dialog.find("#" + img_quality).val(quality_default); - this.dialogShowMask(dialog); - this.dialogLockScreen(); - dialog.show(); + this.dialogShowMask(dialog); + this.dialogLockScreen(); + dialog.show(); - }; + }; - }; + }; - // CommonJS/Node.js - if (typeof require === "function" && typeof exports === "object" && typeof module === "object") - { + // CommonJS/Node.js + if (typeof require === "function" && typeof exports === "object" && typeof module === "object") { module.exports = factory; - } - else if (typeof define === "function") // AMD/CMD/Sea.js + } else if (typeof define === "function") // AMD/CMD/Sea.js { - if (define.amd) { // for Require.js + if (define.amd) { // for Require.js - define(["editormd"], function(editormd) { + define(["editormd"], function (editormd) { factory(editormd); }); - } else { // for Sea.js - define(function(require) { + } else { // for Sea.js + define(function (require) { var editormd = require("../../editormd"); factory(editormd); }); - } - } - else - { + } + } else { factory(window.editormd); - } + } + + function checkRate(input, defaultNum) { + var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/ + var number = document.getElementById(input).value; + if (!re.test(number)) { + if (number == "") { + return false; + } + alert("请输入正确的数字"); + document.getElementById(id).value = defaultNum; + return false; + } + return true; + } + + function resizeImg(id, defaultNum, action) { + if (checkRate(id)) + return document.getElementById(id).value; + else { + + //document.getElementById(id).value = val; + return defaultNum; + } + } })(); From 31311161536b5973ef1601b71d0cc8d5da1e162a Mon Sep 17 00:00:00 2001 From: xlxiang <30598565+xlxiang@users.noreply.github.com> Date: Sat, 30 May 2020 20:56:39 +0800 Subject: [PATCH 2/2] Update views.py fix "RGBA" to "RGB" --- mdeditor/views.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mdeditor/views.py b/mdeditor/views.py index 9d84c41..a087ef7 100644 --- a/mdeditor/views.py +++ b/mdeditor/views.py @@ -71,7 +71,7 @@ def post(self, request, *args, **kwargs): '{0:%Y%m%d%H%M%S%f}'.format(datetime.datetime.now()), file_extension) with open(os.path.join(file_path, file_full_name), 'wb+') as file: - img = Image.open(upload_image) # .convert("RGB") + img = Image.open(upload_image).convert("RGB") # resize image with high-quality if int(imgWidth) > 0 and int(imgHeight) > 0: out = img.resize((int(imgWidth), int(imgHeight)), Image.ANTIALIAS)