From ffcc84b1fb059836af9860336b40ffc458dbd61f Mon Sep 17 00:00:00 2001 From: Steve Megson Date: Thu, 25 Jul 2019 18:41:41 +0100 Subject: [PATCH 1/6] Data type configuration serialization --- src/Umbraco.Core/Services/Implement/EntityXmlSerializer.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Core/Services/Implement/EntityXmlSerializer.cs b/src/Umbraco.Core/Services/Implement/EntityXmlSerializer.cs index ace740a831..bc21da15a7 100644 --- a/src/Umbraco.Core/Services/Implement/EntityXmlSerializer.cs +++ b/src/Umbraco.Core/Services/Implement/EntityXmlSerializer.cs @@ -172,7 +172,7 @@ namespace Umbraco.Core.Services.Implement xml.Add(new XAttribute("Id", dataType.EditorAlias)); xml.Add(new XAttribute("Definition", dataType.Key)); xml.Add(new XAttribute("DatabaseType", dataType.DatabaseType.ToString())); - xml.Add(new XAttribute("Configuration", JsonConvert.SerializeObject(dataType.Configuration))); + xml.Add(new XAttribute("Configuration", JsonConvert.SerializeObject(dataType.Configuration, PropertyEditors.ConfigurationEditor.ConfigurationJsonSettings))); var folderNames = string.Empty; if (dataType.Level != 1) From 92a5182427fe70ee776f94b79182362c79c64f2e Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Mon, 23 Sep 2019 14:42:28 +0100 Subject: [PATCH 2/6] Moves the image resize on insert into a function that media insert & drag/pasted images uses --- .../src/common/services/tinymce.service.js | 57 ++++++++++++------- 1 file changed, 36 insertions(+), 21 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js index def020f8f6..45b345ca74 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js @@ -241,7 +241,12 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s // To create a media item & delete this tmp one etc tinymce.activeEditor.$(img).attr({ "data-tmpimg": tmpLocation }); - // We need to remove the image from the cache, otherwise we can't handle if we upload the exactly + // Resize the image to the max size configured + // NOTE: no imagesrc passed into func as the src is blob://... + // We will append ImageResizing Querystrings on perist to DB with node save + sizeImageInEditor(editor, img); + + // We need to remove the image from the cache, otherwise we can't handle if we upload the exactly // same image twice tinymce.activeEditor.editorUpload.blobCache.removeByUri(imgSrc); }); @@ -249,19 +254,42 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s } }); } - + function cleanupPasteData(plugin, args) { - + // Remove spans args.content = args.content.replace(/<\s*span[^>]*>(.*?)<\s*\/\s*span>/g, "$1"); - + // Convert b to strong. args.content = args.content.replace(/<\s*b([^>]*)>(.*?)<\s*\/\s*b([^>]*)>/g, "$2"); - + // convert i to em args.content = args.content.replace(/<\s*i([^>]*)>(.*?)<\s*\/\s*i([^>]*)>/g, "$2"); - - + + + } + + function sizeImageInEditor(editor, imageDomElement, imgUrl) { + + var size = editor.dom.getSize(imageDomElement); + console.log('size', size); + + if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) { + var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h); + + console.log('new size', newSize); + + editor.dom.setAttrib(imageDomElement, 'width', newSize.width); + editor.dom.setAttrib(imageDomElement, 'height', newSize.height); + + // Images inserted via Media Picker will have a URL we can use for ImageResizer QueryStrings + // Images pasted/dragged in are not persisted to media until saved & thus will need to be added + if(imgUrl){ + console.log('got an img src use QS'); + var src = imgUrl + "?width=" + newSize.width + "&height=" + newSize.height; + editor.dom.setAttrib(imageDomElement, 'data-mce-src', src); + } + } } return { @@ -620,21 +648,8 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s $timeout(function () { var imgElm = editor.dom.get('__mcenew'); - var size = editor.dom.getSize(imgElm); - - if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) { - var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h); - - editor.dom.setAttrib(imgElm, 'width', newSize.width); - editor.dom.setAttrib(imgElm, 'height', newSize.height); - - if (img.url) { - var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height; - editor.dom.setAttrib(imgElm, 'data-mce-src', src); - } - } + sizeImageInEditor(editor, imgElm, img.url); editor.dom.setAttrib(imgElm, 'id', null); - editor.fire('Change'); }, 500); From 7404ccf02428be01de392ae41cdd880b8eadab1d Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Mon, 23 Sep 2019 14:47:41 +0100 Subject: [PATCH 3/6] C# change to append/perist the width & height into the pasted/dragged image to the image src url for ImageProcessor resizing --- src/Umbraco.Web/Templates/TemplateUtilities.cs | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web/Templates/TemplateUtilities.cs b/src/Umbraco.Web/Templates/TemplateUtilities.cs index edccbcc9d4..bc34dbdda7 100644 --- a/src/Umbraco.Web/Templates/TemplateUtilities.cs +++ b/src/Umbraco.Web/Templates/TemplateUtilities.cs @@ -237,9 +237,19 @@ namespace Umbraco.Web.Templates var udi = mediaFile.GetUdi(); img.SetAttributeValue("data-udi", udi.ToString()); - //Get the new persisted image url + // Get the new persisted image url var mediaTyped = Current.UmbracoHelper.Media(mediaFile.Id); var location = mediaTyped.Url; + + // Find the width & height attributes as we need to set the imageprocessor QueryString + var width = img.GetAttributeValue("width", int.MinValue); + var height = img.GetAttributeValue("height", int.MinValue); + + if(width != int.MinValue && height != int.MinValue) + { + location = $"{location}?width={width}&height={height}&mode=max"; + } + img.SetAttributeValue("src", location); // Remove the data attribute (so we do not re-process this) From e0218dc96e0cca2618569db94641b456bc308327 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 24 Sep 2019 12:10:55 +0100 Subject: [PATCH 4/6] Update src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js Co-Authored-By: Bjarke Berg --- src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js index 45b345ca74..9e6f175301 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js @@ -277,7 +277,6 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) { var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h); - console.log('new size', newSize); editor.dom.setAttrib(imageDomElement, 'width', newSize.width); editor.dom.setAttrib(imageDomElement, 'height', newSize.height); From ab7d380ecc547e57af45d5841df95fa5050fbc07 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 24 Sep 2019 12:11:01 +0100 Subject: [PATCH 5/6] Update src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js Co-Authored-By: Bjarke Berg --- src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js index 9e6f175301..dcc186b1d2 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js @@ -284,7 +284,6 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s // Images inserted via Media Picker will have a URL we can use for ImageResizer QueryStrings // Images pasted/dragged in are not persisted to media until saved & thus will need to be added if(imgUrl){ - console.log('got an img src use QS'); var src = imgUrl + "?width=" + newSize.width + "&height=" + newSize.height; editor.dom.setAttrib(imageDomElement, 'data-mce-src', src); } From e3b4283cedc93c0f06a00fc9a2004eaed910f0ae Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Tue, 24 Sep 2019 12:11:14 +0100 Subject: [PATCH 6/6] Update src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js Co-Authored-By: Bjarke Berg --- src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js index dcc186b1d2..6c01f49442 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js @@ -272,7 +272,6 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s function sizeImageInEditor(editor, imageDomElement, imgUrl) { var size = editor.dom.getSize(imageDomElement); - console.log('size', size); if (editor.settings.maxImageSize && editor.settings.maxImageSize !== 0) { var newSize = imageHelper.scaleToMaxSize(editor.settings.maxImageSize, size.w, size.h);