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

Auto resize image on insert

Browse Source
This commit is contained in:
perploug
2013-09-02 17:08:04 +02:00
parent c49ee0da7a
commit 9a33849f6e
1 changed files with 43 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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