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

Merge branch 'v8/8.2' into v8/dev

Browse Source
This commit is contained in:
Sebastiaan Janssen
2019-09-26 11:31:30 +02:00
parent 713cf2312f 39ad226007
commit 8ec73b1810
3 changed files with 47 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -217,64 +217,6 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
xhr.send(formData);
}
function initEvents(editor){
editor.on('SetContent', function (e) {
var content = e.content;
// Upload BLOB images (dragged/pasted ones)
if(content.indexOf('<img src="blob:') > -1){
editor.uploadImages(function(data) {
// Once all images have been uploaded
data.forEach(function(item) {
// Select img element
var img = item.element;
// Get img src
var imgSrc = img.getAttribute("src");
var tmpLocation = localStorageService.get(`tinymce__${imgSrc}`)
// Select the img & add new attr which we can search for
// When its being persisted in RTE property editor
// To create a media item & delete this tmp one etc
tinymce.activeEditor.$(img).attr({ "data-tmpimg": tmpLocation });
// 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);
});
});
// Get all img where src starts with blob: AND does NOT have a data=tmpimg attribute
// This is most likely seen as a duplicate image that has already been uploaded
// editor.uploadImages() does not give us any indiciation that the image been uploaded already
var blobImageWithNoTmpImgAttribute = editor.dom.select("img[src^='blob:']:not([data-tmpimg])");
//For each of these selected items
blobImageWithNoTmpImgAttribute.forEach(imageElement => {
var blobSrcUri = editor.dom.getAttrib(imageElement, "src");
// Find the same image uploaded (Should be in LocalStorage)
// May already exist in the editor as duplicate image
// OR added to the RTE, deleted & re-added again
// So lets fetch the tempurl out of localstorage for that blob URI item
var tmpLocation = localStorageService.get(`tinymce__${blobSrcUri}`)
if(tmpLocation){
sizeImageInEditor(editor, imageElement);
editor.dom.setAttrib(imageElement, "data-tmpimg", tmpLocation);
}
});
}
});
}
function cleanupPasteData(plugin, args) {
// Remove spans
@@ -1311,7 +1253,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
// Upload BLOB images (dragged/pasted ones)
if(content.indexOf('<img src="blob:') > -1){
editor.uploadImages(function(data) {
args.editor.uploadImages(function(data) {
// Once all images have been uploaded
data.forEach(function(item) {
// Select img element
@@ -1319,18 +1261,43 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
// Get img src
var imgSrc = img.getAttribute("src");
var tmpLocation = localStorage.getItem(`tinymce__${imgSrc}`);
var tmpLocation = localStorageService.get(`tinymce__${imgSrc}`)
// Select the img & add new attr which we can search for
// When its being persisted in RTE property editor
// 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
// same image twice
tinymce.activeEditor.editorUpload.blobCache.removeByUri(imgSrc);
// 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(args.editor, img);
});
});
// Get all img where src starts with blob: AND does NOT have a data=tmpimg attribute
// This is most likely seen as a duplicate image that has already been uploaded
// editor.uploadImages() does not give us any indiciation that the image been uploaded already
var blobImageWithNoTmpImgAttribute = args.editor.dom.select("img[src^='blob:']:not([data-tmpimg])");
//For each of these selected items
blobImageWithNoTmpImgAttribute.forEach(imageElement => {
var blobSrcUri = args.editor.dom.getAttrib(imageElement, "src");
// Find the same image uploaded (Should be in LocalStorage)
// May already exist in the editor as duplicate image
// OR added to the RTE, deleted & re-added again
// So lets fetch the tempurl out of localstorage for that blob URI item
var tmpLocation = localStorageService.get(`tinymce__${blobSrcUri}`)
if(tmpLocation){
sizeImageInEditor(args.editor, imageElement);
args.editor.dom.setAttrib(imageElement, "data-tmpimg", tmpLocation);
}
});
}
});

5
src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
View File

@@ -654,6 +654,11 @@
overflow-y: hidden!important;
}
// had to overwrite defaults from TinyMCE, needed for buttons panel to float to new line in narrow space.
.umb-grid .mce-container > div {
white-space: normal;
}
// MEDIA EDITOR
// -------------------------

17
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js
View File

@@ -28,7 +28,14 @@ angular.module("umbraco")
$scope.containerOverflow = editorConfig.mode === "distraction-free" ? (height ? "auto" : "inherit") : "inherit";
var promises = [];
// we need to make sure that the element is initialized before we can init TinyMCE, because we find the placeholder by ID, so it needs to be appended to document before.
var initPromise = $q((resolve, reject) => {
this.$onInit = resolve;
});
promises.push(initPromise);
//queue file loading
tinyMceAssets.forEach(function (tinyJsAsset) {
promises.push(assetsService.loadJs(tinyJsAsset, $scope));
@@ -77,13 +84,13 @@ angular.module("umbraco")
model: $scope.model,
currentForm: angularHelper.getCurrentForm($scope)
});
};
angular.extend(baseLineConfigObj, standardConfig);
/** Loads in the editor */
tinymce.init(baseLineConfigObj);
//listen for formSubmitting event (the result is callback used to remove the event subscription)
var unsubscribe = $scope.$on("formSubmitting", function () {
if (tinyMceEditor !== undefined && tinyMceEditor != null && !$scope.isLoading) {