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

Rather than tryinbg to find off an inserted img in the DOM use the localStorage

Browse Source 
Uses the Angular localStorage lib that falls back to cookies as opposed to native browser localStorage
Clears out tinymce__ localstorage keys when we save the node to ensure we dont have loads stored for the user
This commit is contained in:
Warren Buckley
2019-09-24 11:47:33 +01:00
parent 906e59c68b
commit 7728559ce4
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
View File

@@ -4,7 +4,7 @@
function ContentEditController($rootScope, $scope, $routeParams, $q, $window,
appState, contentResource, entityResource, navigationService, notificationsService,
serverValidationManager, contentEditingHelper, localizationService, formHelper, umbRequestHelper,
editorState, $http, eventsService, overlayService, $location) {
editorState, $http, eventsService, overlayService, $location, localStorageService) {
var evts = [];
var infiniteMode = $scope.infiniteModel && $scope.infiniteModel.infiniteMode;
@@ -189,6 +189,13 @@
$scope.page.saveButtonState = "success";
$scope.page.buttonGroupState = "success";
}));
evts.push(eventsService.on("content.saved", function(){
// Clear out localstorage keys that start with tinymce__
// When we save/perist a content node
// NOTE: clearAll supports a RegEx pattern of items to remove
localStorageService.clearAll(/^tinymce__/);
}));
}
/**

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

@@ -7,7 +7,7 @@
* A service containing all logic for all of the Umbraco TinyMCE plugins
*/
function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, stylesheetResource, macroResource, macroService,
$routeParams, umbRequestHelper, angularHelper, userService, editorService, entityResource, eventsService) {
$routeParams, umbRequestHelper, angularHelper, userService, editorService, entityResource, eventsService, localStorageService) {
//These are absolutely required in order for the macros to render inline
//we put these as extended elements because they get merged on top of the normal allowed elements by tiny mce
@@ -203,7 +203,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
}
// Put temp location into localstorage (used to update the img with data-tmpimg later on)
localStorage.setItem(`tinymce__${blobInfo.blobUri()}`, json.tmpLocation);
localStorageService.set(`tinymce__${blobInfo.blobUri()}`, json.tmpLocation);
// We set the img src url to be the same as we started
// The Blob URI is stored in TinyMce's cache
@@ -234,7 +234,7 @@ 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
@@ -252,13 +252,14 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
blobImageWithNoTmpImgAttribute.forEach(imageElement => {
var blobSrcUri = editor.dom.getAttrib(imageElement, "src");
// Select/find the same image uploaded with the matching SRC uri
var uploadedImage = editor.dom.select(`img[src="${blobSrcUri}"][data-tmpimg]`);
// 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(uploadedImage){
// Get the value of the tmpimg - so we can apply it to the matched/duplicate image
var dataTmpImg = editor.dom.getAttrib(uploadedImage, "data-tmpimg");
editor.dom.setAttrib(imageElement, "data-tmpimg", dataTmpImg);
if(tmpLocation){
editor.dom.setAttrib(imageElement, "data-tmpimg", tmpLocation);
}
});