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 new file mode 100644 index 0000000000..7fa3bba2a6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js @@ -0,0 +1,153 @@ +/** + * @ngdoc service + * @name umbraco.services.tinyMceService + * + * + * @description + * A service containing all logic for all of the Umbraco TinyMCE plugins + */ +function tinyMceService(dialogService, $log, imageHelper, assetsService, $timeout) { + return { + + /** + * @ngdoc method + * @name umbraco.services.tinyMceService#createInsertEmbeddedMedia + * @methodOf umbraco.services.tinyMceService + * + * @description + * Creates the umbrco insert embedded media tinymce plugin + * + * @param {Object} editor the TinyMCE editor instance + * @param {Object} $scope the current controller scope + */ + createInsertEmbeddedMedia: function (editor, $scope) { + editor.addButton('umbembeddialog', { + icon: 'media', + tooltip: 'Embed', + onclick: function () { + dialogService.embedDialog({ + scope: $scope, callback: function (data) { + editor.insertContent(data); + } + }); + } + }); + }, + + /** + * @ngdoc method + * @name umbraco.services.tinyMceService#createMediaPicker + * @methodOf umbraco.services.tinyMceService + * + * @description + * Creates the umbrco insert media tinymce plugin + * + * @param {Object} editor the TinyMCE editor instance + * @param {Object} $scope the current controller scope + */ + createMediaPicker: function(editor, $scope) { + editor.addButton('umbmediapicker', { + 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); + } + } + }); + } + }); + }, + + /** + * @ngdoc method + * @name umbraco.services.tinyMceService#createIconPicker + * @methodOf umbraco.services.tinyMceService + * + * @description + * Creates the umbrco insert icon tinymce plugin + * + * @param {Object} editor the TinyMCE editor instance + * @param {Object} $scope the current controller scope + */ + createIconPicker: function (editor, $scope) { + editor.addButton('umbiconpicker', { + 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); + } + }); + } + }); + }, + + /** + * @ngdoc method + * @name umbraco.services.tinyMceService#createUmbracoMacro + * @methodOf umbraco.services.tinyMceService + * + * @description + * Creates the insert umbrco macro tinymce plugin + * + * @param {Object} editor the TinyMCE editor instance + * @param {Object} $scope the current controller scope + */ + createInsertMacro: function (editor, $scope) { + editor.addButton('umbmacro', { + icon: 'custom icon-settings-alt', + tooltip: 'Insert macro', + onclick: function () { + + dialogService.open({ + show: true, template: "views/common/dialogs/insertmacro.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); + } + }); + + } + }); + } + }; +} + +angular.module('umbraco.services').factory('tinyMceService', tinyMceService); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/less/hacks.less b/src/Umbraco.Web.UI.Client/src/less/hacks.less index 885a3c07ae..ba59d7b2c2 100644 --- a/src/Umbraco.Web.UI.Client/src/less/hacks.less +++ b/src/Umbraco.Web.UI.Client/src/less/hacks.less @@ -90,4 +90,11 @@ iframe, .content-column-body { .mce-tinymce{border: 1px solid @grayLight !important; } .mce-panel{background: @grayLighter !important; border-color: @grayLight !important;} .mce-btn-group, .mce-btn{border: none !important; background: none !important;} -.mce-ico{font-size: 12px !important; color: @blackLight !important;} \ No newline at end of file +.mce-ico{font-size: 12px !important; color: @blackLight !important;} + +/* Special case to support helviticons for the tiny mce button controls */ +.mce-ico.mce-i-custom[class^="icon-"], +.mce-ico.mce-i-custom[class*=" icon-"] { + font-family: icomoon; + font-size:16px !important; +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/insertmacro.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.controller.js similarity index 89% rename from src/Umbraco.Web.UI.Client/src/views/templates/insertmacro.controller.js rename to src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.controller.js index ce54e173cc..50f95647d6 100644 --- a/src/Umbraco.Web.UI.Client/src/views/templates/insertmacro.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.controller.js @@ -1,6 +1,6 @@ /** * @ngdoc controller - * @name Umbraco.Editors.Templates.InsertMacroController + * @name Umbraco.Dialogs.InsertMacroController * @function * * @description @@ -21,10 +21,6 @@ function InsertMacroController($scope, entityResource, macroResource, umbPropEdi $scope.submit({ selectedMacro: $scope.selectedMacro }); } else { $scope.wizardStep = "paramSelect"; - ////update the view on each editor to be correct - //_.each(data, function (item) { - // item.view = umbPropEditorHelper.getViewPath(item.view); - //}); $scope.macroParams = data; } }); @@ -104,4 +100,4 @@ function InsertMacroController($scope, entityResource, macroResource, umbPropEdi } -angular.module("umbraco").controller("Umbraco.Editors.Templates.InsertMacroController", InsertMacroController); +angular.module("umbraco").controller("Umbraco.Dialogs.InsertMacroController", InsertMacroController); diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/insertmacro.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.html similarity index 93% rename from src/Umbraco.Web.UI.Client/src/views/templates/insertmacro.html rename to src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.html index 3c446c68a5..30835a5c4f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/templates/insertmacro.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/insertmacro.html @@ -1,4 +1,4 @@ -
+
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 d7e19f3694..a4bd9eb266 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,91 +1,45 @@ angular.module("umbraco") .controller("Umbraco.Editors.RTEController", - function($rootScope, $scope, dialogService, $log, imageHelper, assetsService, $timeout){ + function ($rootScope, $scope, dialogService, $log, imageHelper, assetsService, $timeout, tinyMceService) { - assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope).then(function(){ - //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() { + assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope).then(function () { + //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", + //plugins: "pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,advlist,umbracolink,umbracoanchor,umbracostyles,umbracocharmap,umbracomacro,umbracosave,umbracomedia", + //plugins: "umbmacro", + menubar: false, + statusbar: false, + height: 340, + toolbar: "bold italic | styleselect | alignleft aligncenter alignright | bullist numlist | outdent indent | link image umbmediapicker umbiconpicker umbembeddialog umbmacro", + 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' - }; - + //Create the insert media plugin + tinyMceService.createMediaPicker(editor, $scope); - editor.insertContent(editor.dom.createHTML('img', data)); - - $timeout(function(){ - var imgElm = editor.dom.get('__mcenew'); - var size = editor.dom.getSize(imgElm); - $log.log(size); + //Create the insert icon plugin + tinyMceService.createIconPicker(editor, $scope); + + //Create the insert icon plugin + tinyMceService.createInsertEmbeddedMedia(editor, $scope); - 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); - } - }}); - } - }); + //Create the insert macro plugin + tinyMceService.createInsertMacro(editor, $scope); - 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); + } + }); + }, 1); - }); -}); \ No newline at end of file + }); + }); \ No newline at end of file diff --git a/src/Umbraco.Web.UI/umbraco_client/Editors/EditTemplate.js b/src/Umbraco.Web.UI/umbraco_client/Editors/EditTemplate.js index 63b80056e1..e77178ceca 100644 --- a/src/Umbraco.Web.UI/umbraco_client/Editors/EditTemplate.js +++ b/src/Umbraco.Web.UI/umbraco_client/Editors/EditTemplate.js @@ -11,7 +11,7 @@ var self = this; UmbClientMgr.openAngularModalWindow({ - template: "views/templates/insertmacro.html", + template: "views/common/dialogs/insertmacro.html", dialogData: { renderingEngine: "WebForms", selectedAlias: alias diff --git a/src/umbraco.interfaces/umbraco.interfaces.csproj b/src/umbraco.interfaces/umbraco.interfaces.csproj index 4af542ac21..3f2e2f3b19 100644 --- a/src/umbraco.interfaces/umbraco.interfaces.csproj +++ b/src/umbraco.interfaces/umbraco.interfaces.csproj @@ -142,10 +142,6 @@ Code - - - Code - Code