From 0e16d9cd3302e86e22a36253b478b3a07ddd65dc Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 2 Oct 2019 11:59:15 +0100 Subject: [PATCH 1/4] WIP: Try and support images in the RTE that are pasted/dragged in and are NOT in media yet to be able to update the ALT text --- .../src/common/services/tinymce.service.js | 86 +++++++++++++++---- .../mediapicker/mediapicker.controller.js | 23 +++-- 2 files changed, 84 insertions(+), 25 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 8fee11dbc9..0e4816953f 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 @@ -588,12 +588,15 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s var selectedElm = editor.selection.getNode(), - currentTarget; + currentTarget, + imgDomElement; if (selectedElm.nodeName === 'IMG') { var img = $(selectedElm); + imgDomElement = selectedElm; var hasUdi = img.attr("data-udi") ? true : false; + var hasDataTmpImg = img.attr("data-tmpimg") ? true : false; currentTarget = { altText: img.attr("alt"), @@ -605,12 +608,17 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s } else { currentTarget["id"] = img.attr("rel"); } + + if(hasDataTmpImg){ + currentTarget["tmpimg"] = img.attr("data-tmpimg"); + } } userService.getCurrentUser().then(function (userData) { if (callback) { angularHelper.safeApply($rootScope, function() { - callback(currentTarget, userData); + console.log('current data in create media picker', currentTarget); + callback(currentTarget, userData, imgDomElement); }); } }); @@ -618,25 +626,67 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s }); }, - insertMediaInEditor: function (editor, img) { + insertMediaInEditor: function (editor, img, imgDomElement) { if (img) { + // imgElement is only definied if updating an image + // if null/undefinied then its a BRAND new image + if(imgDomElement){ + console.log('UPDATING IMG', img); - var data = { - alt: img.altText || "", - src: (img.url) ? img.url : "nothing.jpg", - id: '__mcenew', - 'data-udi': img.udi - }; + // Check if the img src has changed + // If it has we will need to do some resizing/recalc again + var hasImageSrcChanged = false; - editor.selection.setContent(editor.dom.createHTML('img', data)); + if(img.url !== editor.dom.getAttrib(imgDomElement, "src")){ + console.log("IMG SRC CHANGED !!!!"); + hasImageSrcChanged = true; + } - $timeout(function () { - var imgElm = editor.dom.get('__mcenew'); - sizeImageInEditor(editor, imgElm, img.url); - editor.dom.setAttrib(imgElm, 'id', null); - editor.fire('Change'); + // If null/undefinied it will remove the attribute + editor.dom.setAttrib(imgDomElement, "alt", img.altText); - }, 500); + // It's possible to pick a NEW image - so need to ensure this gets updated + if(img.udi){ + editor.dom.setAttrib(imgDomElement, "data-udi", img.udi); + } + + // It's possible to pick a NEW image - so need to ensure this gets updated + if(img.url){ + editor.dom.setAttrib(imgDomElement, "src", img.url); + } + + // Remove width & height attributes (ONLY if imgSrc changed) + // So native image size is used as this needed to re-calc width & height + // For the function sizeImageInEditor() & apply the image resizing querystrings etc.. + if(hasImageSrcChanged){ + editor.dom.setAttrib(imgDomElement, "width", null); + editor.dom.setAttrib(imgDomElement, "height", null); + + //Re-calc the image dimensions + sizeImageInEditor(editor, imgDomElement, img.url); + } + + } else{ + console.log('CREATE NEW IMAGE', img); + // We need to create a NEW DOM element to insert + var data = { + alt: img.altText || "", + src: (img.url) ? img.url : "nothing.jpg", + id: "__mcenew", + "data-udi": img.udi + }; + editor.selection.setContent(editor.dom.createHTML('img', data)); + + // Insert a DOM element with an ID of __mcenew + // So we can select it after 500ms by that ID + // In order to call the sizeImageEditor function to size img correctly + $timeout(function () { + var imgElm = editor.dom.get("__mcenew"); + sizeImageInEditor(editor, imgElm, img.url); + editor.dom.setAttrib(imgElm, "id", null); + editor.fire("Change"); + }, 500); + } } }, @@ -1399,7 +1449,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s }); //Create the insert media plugin - self.createMediaPicker(args.editor, function (currentTarget, userData) { + self.createMediaPicker(args.editor, function (currentTarget, userData, imgDomElement) { var startNodeId, startNodeIsVirtual; if (!args.model.config.startNodeId) { @@ -1422,7 +1472,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s startNodeIsVirtual: startNodeIsVirtual, dataTypeKey: args.model.dataTypeKey, submit: function (model) { - self.insertMediaInEditor(args.editor, model.selection[0]); + self.insertMediaInEditor(args.editor, model.selection[0], imgDomElement); editorService.close(); }, close: function () { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js index 837c0ebc9d..4b6cfb6969 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js @@ -98,21 +98,30 @@ angular.module("umbraco") gotoStartNode(); } } else { - //if a target is specified, go look it up - generally this target will just contain ids not the actual full - //media object so we need to look it up + // if a target is specified, go look it up - generally this target will just contain ids not the actual full + // media object so we need to look it up var id = $scope.target.udi ? $scope.target.udi : $scope.target.id; - var altText = $scope.target.altText; - entityResource.getById(id, "Media") + + // ID of a UDI or legacy int ID still could be null/undefinied here + // As user may dragged in an image that has not been saved to media section yet + if(id){ + entityResource.getById(id, "Media") .then(function (node) { - $scope.target = node; + //$scope.target = node; //Not 100% sure why we override it here?! if (ensureWithinStartNode(node)) { selectImage(node); - $scope.target.url = mediaHelper.resolveFile(node); - $scope.target.altText = altText; + //$scope.target.url = mediaHelper.resolveFile(node); + //$scope.target.altText = altText; $scope.openDetailsDialog(); } }, gotoStartNode); + } + else { + // No ID set - then this is going to be a tmpimg that has not been uploaded + // User editing this will want to be changing the ALT text + $scope.openDetailsDialog(); + } } } From 76dd7a667a92d6d7159485b89ffeb105909aaca4 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 2 Oct 2019 13:23:05 +0100 Subject: [PATCH 2/4] Remove console.logs --- .../src/common/services/tinymce.service.js | 5 ----- 1 file changed, 5 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 0e4816953f..4480968d0a 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 @@ -617,7 +617,6 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s userService.getCurrentUser().then(function (userData) { if (callback) { angularHelper.safeApply($rootScope, function() { - console.log('current data in create media picker', currentTarget); callback(currentTarget, userData, imgDomElement); }); } @@ -631,14 +630,11 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s // imgElement is only definied if updating an image // if null/undefinied then its a BRAND new image if(imgDomElement){ - console.log('UPDATING IMG', img); - // Check if the img src has changed // If it has we will need to do some resizing/recalc again var hasImageSrcChanged = false; if(img.url !== editor.dom.getAttrib(imgDomElement, "src")){ - console.log("IMG SRC CHANGED !!!!"); hasImageSrcChanged = true; } @@ -667,7 +663,6 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s } } else{ - console.log('CREATE NEW IMAGE', img); // We need to create a NEW DOM element to insert var data = { alt: img.altText || "", From 05ff51575bde05ca2e57352a71ae5646007d9148 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Wed, 2 Oct 2019 15:30:41 +0200 Subject: [PATCH 3/4] Wait for image to load, for measuring size. Removed the 500ms timeout that was prone to error if image was'nt loaded within time. --- .../src/common/services/tinymce.service.js | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 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 4480968d0a..3978cedd2d 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 @@ -664,23 +664,37 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s } else{ // We need to create a NEW DOM element to insert + // setting an attribute of ID to __mcenew, so we can gather a reference to the node, to be able to update its size accordingly to the size of the image. var data = { alt: img.altText || "", src: (img.url) ? img.url : "nothing.jpg", id: "__mcenew", "data-udi": img.udi }; + editor.selection.setContent(editor.dom.createHTML('img', data)); - - // Insert a DOM element with an ID of __mcenew - // So we can select it after 500ms by that ID - // In order to call the sizeImageEditor function to size img correctly + + // Using settimeout to wait for a DoM-render, so we can find the new element by ID. $timeout(function () { + var imgElm = editor.dom.get("__mcenew"); - sizeImageInEditor(editor, imgElm, img.url); editor.dom.setAttrib(imgElm, "id", null); - editor.fire("Change"); - }, 500); + + // When image is loaded we are ready to call sizeImageInEditor. + var onImageLoaded = function() { + sizeImageInEditor(editor, imgElm, img.url); + editor.fire("Change"); + } + + // Check if image already is loaded. + if(imgElm.complete === true) { + onImageLoaded(); + } else { + imgElm.onload = onImageLoaded; + } + + }); + } } }, From 1ad3103d942da65220284633f30ebb35aacd3c84 Mon Sep 17 00:00:00 2001 From: Bjarke Berg Date: Mon, 7 Oct 2019 13:19:58 +0200 Subject: [PATCH 4/4] https://github.com/umbraco/Umbraco-CMS/issues/6516 - Revert uncommenting stuff, without knowing why the code was their. --- .../mediapicker/mediapicker.controller.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js index 4b6cfb6969..24b8b999fa 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js @@ -101,17 +101,18 @@ angular.module("umbraco") // if a target is specified, go look it up - generally this target will just contain ids not the actual full // media object so we need to look it up var id = $scope.target.udi ? $scope.target.udi : $scope.target.id; - + var altText = $scope.target.altText; + // ID of a UDI or legacy int ID still could be null/undefinied here // As user may dragged in an image that has not been saved to media section yet if(id){ entityResource.getById(id, "Media") .then(function (node) { - //$scope.target = node; //Not 100% sure why we override it here?! + $scope.target = node; if (ensureWithinStartNode(node)) { selectImage(node); - //$scope.target.url = mediaHelper.resolveFile(node); - //$scope.target.altText = altText; + $scope.target.url = mediaHelper.resolveFile(node); + $scope.target.altText = altText; $scope.openDetailsDialog(); } }, @@ -517,4 +518,4 @@ angular.module("umbraco") onInit(); - }); \ No newline at end of file + });