From ebaa46b2fc0c194f611737c3476b92c03e521843 Mon Sep 17 00:00:00 2001 From: perploug Date: Thu, 3 Apr 2014 09:31:32 +0200 Subject: [PATCH] Fixes: U4-4212 Insert Image in RTE not resizing image --- .../lib/tinymce/skins/umbraco/content.min.css | 5 +- .../src/common/services/tinymce.service.js | 7 ++- .../propertyeditors/rte/rte.controller.js | 50 ++++++++++++++++--- 3 files changed, 54 insertions(+), 8 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/lib/tinymce/skins/umbraco/content.min.css b/src/Umbraco.Web.UI.Client/lib/tinymce/skins/umbraco/content.min.css index cb2ed40889..b294a08eae 100755 --- a/src/Umbraco.Web.UI.Client/lib/tinymce/skins/umbraco/content.min.css +++ b/src/Umbraco.Web.UI.Client/lib/tinymce/skins/umbraco/content.min.css @@ -92,4 +92,7 @@ td.mce-item-selected, th.mce-item-selected { -webkit-background-size: 18px; background-size: 18px; background-position-x: 99%; - } \ No newline at end of file + } + +/* TINYMCE IMAGE RESIZING LIMITS */ +#mceResizeHandlen, #mceResizeHandles, #mceResizeHandlee, #mceResizeHandlew{display: none !important; visibility: hidden !important;} \ No newline at end of file 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 80d036b3e4..8e7ee918cc 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 @@ -121,11 +121,16 @@ function tinyMceService(dialogService, $log, imageHelper, $http, $timeout, macro var size = editor.dom.getSize(imgElm); var newSize = imageHelper.scaleToMaxSize(500, size.w, size.h); + var s = "width: " + newSize.width + "px; height:" + newSize.height + "px;"; editor.dom.setAttrib(imgElm, 'style', s); - editor.dom.setAttrib(imgElm, 'rel', newSize.width + "," + newSize.height); editor.dom.setAttrib(imgElm, 'id', null); + if(img.url){ + var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height; + editor.dom.setAttrib(imgElm, 'data-mce-src', src); + } + }, 500); } } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js index 02b365bacd..daf058f313 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.controller.js @@ -109,18 +109,57 @@ angular.module("umbraco") //listen to both change and blur and also on our own 'saving' event. I think this will be best because a //timer might end up using unwanted cpu and we'd still have to listen to our saving event in case they clicked //save before the timeout elapsed. - editor.on('change', function (e) { - angularHelper.safeApply($scope, function () { - $scope.model.value = editor.getContent(); - }); - }); + //this doesnt actually work... + //editor.on('change', function (e) { + // angularHelper.safeApply($scope, function () { + // $scope.model.value = editor.getContent(); + // }); + //}); + + //when we leave the editor (maybe) editor.on('blur', function (e) { + editor.save(); angularHelper.safeApply($scope, function () { $scope.model.value = editor.getContent(); }); }); + //when buttons modify content + editor.on('ExecCommand', function (e) { + editor.save(); + angularHelper.safeApply($scope, function () { + $scope.model.value = editor.getContent(); + }); + }); + + // Update model on keypress + editor.on('KeyUp', function (e) { + editor.save(); + angularHelper.safeApply($scope, function () { + $scope.model.value = editor.getContent(); + }); + }); + + // Update model on change, i.e. copy/pasted text, plugins altering content + editor.on('SetContent', function (e) { + if(!e.initial){ + editor.save(); + angularHelper.safeApply($scope, function () { + $scope.model.value = editor.getContent(); + }); + } + }); + + + editor.on('ObjectResized', function(e) { + var qs = "?width=" + e.width + "px&height=" + e.height + "px"; + var srcAttr = $(e.target).attr("src"); + var path = srcAttr.split("?")[0]; + $(e.target).attr("data-mce-src", path + qs); + }); + + //Create the insert media plugin tinyMceService.createMediaPicker(editor, $scope); @@ -165,7 +204,6 @@ angular.module("umbraco") //listen for formSubmitting event (the result is callback used to remove the event subscription) var unsubscribe = $scope.$on("formSubmitting", function () { - //TODO: Here we should parse out the macro rendered content so we can save on a lot of bytes in data xfer // we do parse it out on the server side but would be nice to do that on the client side before as well. $scope.model.value = tinyMceEditor.getContent();