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

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

Browse Source
This commit is contained in:
Warren Buckley
2019-10-02 11:59:15 +01:00
committed by Bjarke Berg
parent aed32afd0f
commit 0e16d9cd33
2 changed files with 84 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
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,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 <img> 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 () {

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

@@ -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();
}
}
}