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 761e4ef715..0d7a56dc3f 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 @@ -1,6 +1,6 @@ angular.module("umbraco") .controller("Umbraco.Editors.RTEController", - function($rootScope, $scope, dialogService, $log, imageHelper, assetsService){ + function($rootScope, $scope, dialogService, $log, imageHelper, assetsService, $timeout){ assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope).then(function(){ tinymce.DOM.events.domLoaded = true; @@ -11,9 +11,10 @@ angular.module("umbraco") menubar : false, statusbar: false, height: 340, - toolbar: "bold italic | styleselect | alignleft aligncenter alignright | bullist numlist | outdent indent | link image mediapicker", + toolbar: "bold italic | styleselect | alignleft aligncenter alignright | bullist numlist | outdent indent | link image mediapicker iconpicker", setup : function(editor) { + editor.on('blur', function(e) { $scope.$apply(function() { $scope.model.value = editor.getContent(); @@ -24,33 +25,52 @@ angular.module("umbraco") icon: 'media', tooltip: 'Media Picker', onclick: function(){ - dialogService.mediaPicker({scope: $scope, callback: function(data){ - - //really simple example on how to intergrate a service with tinyMCE - $(data.selection).each(function (i, img) { + dialogService.mediaPicker({scope: $scope, callback: function(img){ + + var imagePropVal = imageHelper.getImagePropertyVaue({imageModel: img, scope: $scope}); + var data = { + src: (imagePropVal != null && imagePropVal != "") ? imagePropVal: "nothing.jpg", + id: '__mcenew' + }; + + $log.log(data); - var imagePropVal = imageHelper.getImagePropertyVaue({imageModel: img, scope: $scope}); - var data = { - src: (imagePropVal != null && imagePropVal != "") ? imagePropVal: "nothing.jpg", - id: '__mcenew' - }; - - editor.insertContent(editor.dom.createHTML('img', data)); - var imgElm = editor.dom.get('__mcenew'); - var size = editor.dom.getSize(imgElm); + editor.insertContent(editor.dom.createHTML('img', data)); + + $timeout(function(){ + var imgElm = editor.dom.get('__mcenew'); + var size = editor.dom.getSize(imgElm); + $log.log(size); - 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); - - }); - + 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); + + }, 500); + }}); } }); + + editor.addButton('iconpicker', { + icon: 'media', + tooltip: 'Icon Picker', + onclick: function(){ + dialogService.open({show: true, template: "views/common/dialogs/iconpicker.html", scope: $scope, callback: function(c){ + + var data = { + style: 'font-size: 60px' + }; + + var i = editor.dom.createHTML('i', data); + tinyMCE.activeEditor.dom.addClass(i, c); + editor.insertContent(i); + }}); + } + }); } });