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

Fixes bug with multiple TinyMCE editors on the same page

Browse Source
This commit is contained in:
perploug
2013-09-17 13:43:38 +02:00
parent b8ae98ab13
commit 4b3db20d90
1 changed files with 79 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,96 +3,89 @@ angular.module("umbraco")
function($rootScope, $scope, dialogService, $log, imageHelper, assetsService, $timeout){
assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope).then(function(){
tinymce.DOM.events.domLoaded = true;
tinymce.init({
selector: "#" + $scope.model.alias + "_rte",
skin: "umbraco",
menubar : false,
statusbar: false,
height: 340,
toolbar: "bold italic | styleselect | alignleft aligncenter alignright | bullist numlist | outdent indent | link image mediapicker iconpicker embeddialog",
setup : function(editor) {
editor.on('blur', function(e) {
$scope.$apply(function() {
$scope.model.value = editor.getContent();
});
});
editor.addButton('mediapicker', {
icon: 'media',
tooltip: 'Media Picker',
onclick: function(){
dialogService.mediaPicker({scope: $scope, callback: function(img){
if(img){
var imagePropVal = imageHelper.getImagePropertyValue({imageModel: img, scope: $scope});
var data = {
src: (imagePropVal != null && imagePropVal != "") ? imagePropVal: "nothing.jpg",
id: '__mcenew'
};
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);
}, 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);
}});
}
});
editor.addButton('embeddialog', {
icon: 'media',
tooltip: 'Embed',
onclick: function () {
dialogService.embedDialog({
scope: $scope, callback: function (data) {
editor.insertContent(data);
}
//we need to add a timeout here, to force a redraw so TinyMCE can find
//the elements needed
$timeout(function(){
tinymce.DOM.events.domLoaded = true;
tinymce.init({
mode: "exact",
elements: $scope.model.alias+"_rte",
skin: "umbraco",
menubar : false,
statusbar: false,
height: 340,
toolbar: "bold italic | styleselect | alignleft aligncenter alignright | bullist numlist | outdent indent | link image mediapicker iconpicker embeddialog",
setup : function(editor) {
editor.on('blur', function(e) {
$scope.$apply(function() {
$scope.model.value = editor.getContent();
});
}
});
}
});
});
editor.addButton('mediapicker', {
icon: 'media',
tooltip: 'Media Picker',
onclick: function(){
dialogService.mediaPicker({scope: $scope, callback: function(img){
if(img){
var imagePropVal = imageHelper.getImagePropertyValue({imageModel: img, scope: $scope});
var data = {
src: (imagePropVal != null && imagePropVal != "") ? imagePropVal: "nothing.jpg",
id: '__mcenew'
};
$scope.openMediaPicker =function(value){
var d = dialog.mediaPicker({scope: $scope, callback: populate});
};
editor.insertContent(editor.dom.createHTML('img', data));
$timeout(function(){
var imgElm = editor.dom.get('__mcenew');
var size = editor.dom.getSize(imgElm);
$log.log(size);
function populate(data){
$scope.model.value = data.selection;
}
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);
}});
}
});
editor.addButton('embeddialog', {
icon: 'media',
tooltip: 'Embed',
onclick: function () {
dialogService.embedDialog({
scope: $scope, callback: function (data) {
editor.insertContent(data);
}
});
}
});
}
});
}, 1);
});
});