yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6568 from umbraco/v8/bugfix/AB2997-RTE-img-button-throws-tempimg-correct-base

Browse Source 
Allow pasted & dragged images that are not yet saved to allow ALT text to be edited
This commit is contained in:
Bjarke Berg
2019-10-07 15:00:36 +02:00
committed by GitHub
parent a87b72cd05 1ad3103d94
commit ccd4392c2a
2 changed files with 91 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
View File

@@ -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,16 @@ 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);
callback(currentTarget, userData, imgDomElement);
});
}
});
@@ -618,25 +625,77 @@ 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){
// Check if the img src has changed
// If it has we will need to do some resizing/recalc again
var hasImageSrcChanged = false;
var data = {
alt: img.altText || "",
src: (img.url) ? img.url : "nothing.jpg",
id: '__mcenew',
'data-udi': img.udi
};
if(img.url !== editor.dom.getAttrib(imgDomElement, "src")){
hasImageSrcChanged = true;
}
editor.selection.setContent(editor.dom.createHTML('img', data));
// If null/undefinied it will remove the attribute
editor.dom.setAttrib(imgDomElement, "alt", img.altText);
$timeout(function () {
var imgElm = editor.dom.get('__mcenew');
sizeImageInEditor(editor, imgElm, img.url);
editor.dom.setAttrib(imgElm, 'id', null);
editor.fire('Change');
// 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);
}
}, 500);
// 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{
// We need to create a NEW DOM <img> 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));
// 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");
editor.dom.setAttrib(imgElm, "id", null);
// 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;
}
});
}
}
},
@@ -1402,7 +1461,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) {
@@ -1425,7 +1484,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 () {

18
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js
View File

@@ -98,11 +98,15 @@ 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;
if (ensureWithinStartNode(node)) {
@@ -113,6 +117,12 @@ angular.module("umbraco")
}
},
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();
}
}
}
@@ -508,4 +518,4 @@ angular.module("umbraco")
onInit();
});
});