diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/stylesheet.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/stylesheet.resource.js index 8716fdf29a..20279cb675 100644 --- a/src/Umbraco.Web.UI.Client/src/common/resources/stylesheet.resource.js +++ b/src/Umbraco.Web.UI.Client/src/common/resources/stylesheet.resource.js @@ -36,6 +36,27 @@ function stylesheetResource($q, $http, umbRequestHelper) { "stylesheetApiBaseUrl", "GetAll")), 'Failed to retreive stylesheets '); + }, + + getRules: function (id) { + return umbRequestHelper.resourcePromise( + $http.get( + umbRequestHelper.getApiUrl( + "stylesheetApiBaseUrl", + "GetRules", + [{ id: id }] + )), + 'Failed to retreive stylesheets '); + }, + + getRulesByName: function (name) { + return umbRequestHelper.resourcePromise( + $http.get( + umbRequestHelper.getApiUrl( + "stylesheetApiBaseUrl", + "GetRulesByName", + [{ name: name }])), + 'Failed to retreive stylesheets '); } }; } 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 c9c8b2cbfc..ab31a4314a 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.PropertyEditors.RTEController", - function ($rootScope, $element, $scope, dialogService, $log, imageHelper, assetsService, $timeout, tinyMceService, angularHelper) { + function ($rootScope, $element, $scope, dialogService, $log, imageHelper, assetsService, $timeout, tinyMceService, angularHelper, stylesheetResource) { tinyMceService.configuration().then(function(tinyMceConfig){ @@ -25,7 +25,32 @@ angular.module("umbraco") //config value on the data type var toolbar = editorConfig.toolbar.join(" | "); - + var stylesheets = []; + var styleFormats = []; + + angular.forEach(editorConfig.stylesheets, function(val, key){ + stylesheets.push("/css/" + val + ".css"); + + stylesheetResource.getRulesByName(val).then(function(rules){ + angular.forEach(rules, function(rule){ + var r = {}; + r.title = rule.name; + if(rule.selector[0] == "."){ + r.inline = "span"; + r.classes = rule.selector.substring(1); + }else if(rule.selector[0] == "#"){ + r.inline = "span"; + r.attributes = {id: rule.selector.substring(1)}; + }else{ + r.block = rule.selector; + } + + styleFormats.push(r); + }) + }); + }); + + assetsService.loadJs("lib/tinymce/tinymce.min.js", $scope).then(function () { /** Loads in the editor */ @@ -47,7 +72,9 @@ angular.module("umbraco") statusbar: false, height: editorConfig.dimensions.height, toolbar: toolbar, + content_css: stylesheets.join(','), relative_urls: false, + style_formats: styleFormats, setup: function (editor) { //We need to listen on multiple things here because of the nature of tinymce, it doesn't diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js index 17240666cb..097907871e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.controller.js @@ -1,7 +1,8 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController", - function ($scope, $timeout, tinyMceService, stylesheetResource) { + function ($scope, $timeout, $log, tinyMceService, stylesheetResource) { var cfg = tinyMceService.defaultPrevalues(); + if($scope.model.value){ if(angular.isString($scope.model.value)){ $scope.model.value = cfg; @@ -12,14 +13,16 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController", tinyMceService.configuration().then(function(config){ $scope.tinyMceConfig = config; + }); stylesheetResource.getAll().then(function(stylesheets){ $scope.stylesheets = stylesheets; }); - $scope.selected = function(alias, lookup){ - return lookup.indexOf(alias) >= 0; + $scope.selected = function(cmd, alias, lookup){ + cmd.selected = lookup.indexOf(alias) >= 0; + return cmd.selected; }; $scope.selectCommand = function(command){ @@ -33,12 +36,21 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController", }; $scope.selectStylesheet = function(css){ - var index = $scope.model.value.stylesheets.indexOf(css.path); + var index = $scope.model.value.stylesheets.indexOf(css.name); if(css.selected && index === -1){ - $scope.model.value.stylesheets.push(css.path); + $scope.model.value.stylesheets.push(css.name); }else if(index >= 0){ $scope.model.value.stylesheets.splice(index, 1); } }; + + $scope.$on("formSubmitting", function (ev, args) { + + var commands = _.where($scope.tinyMceConfig.commands, {selected: true}); + $scope.model.value.toolbar = _.pluck(commands, "frontEndCommand"); + + + }); + }); diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html index 28a3b68e3b..2b79ca134c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.prevalues.html @@ -3,7 +3,7 @@
@@ -17,7 +17,7 @@
@@ -26,7 +26,7 @@ - x Pixels + x Pixels -
\ No newline at end of file diff --git a/src/Umbraco.Web.UI/config/tinyMceConfig.Release.config b/src/Umbraco.Web.UI/config/tinyMceConfig.Release.config index 9fb8a56c99..a0135e3d60 100644 --- a/src/Umbraco.Web.UI/config/tinyMceConfig.Release.config +++ b/src/Umbraco.Web.UI/config/tinyMceConfig.Release.config @@ -40,17 +40,19 @@ copy 14 + + + + styleselect images/editor/showStyles.png - umbracocss + styleselect 20 @@ -195,13 +197,6 @@ charmap 74 - - mceSpellCheck - images/editor/spellchecker.gif - spellchecker - 75 - - code diff --git a/src/Umbraco.Web.UI/config/tinyMceConfig.config b/src/Umbraco.Web.UI/config/tinyMceConfig.config index d814cc87bc..209d12ce4a 100644 --- a/src/Umbraco.Web.UI/config/tinyMceConfig.config +++ b/src/Umbraco.Web.UI/config/tinyMceConfig.config @@ -40,18 +40,20 @@ copy 14 + + - - stylePicker - images/editor/showStyles.png - umbracocss - 20 + + styleselect + images/editor/showStyles.png + styleselect + 20 bold @@ -202,13 +204,7 @@ charmap 74 - - - mceSpellCheck - images/editor/spellchecker.gif - spellchecker - 75 - + code diff --git a/src/Umbraco.Web/Editors/StylesheetController.cs b/src/Umbraco.Web/Editors/StylesheetController.cs index 842af1cd96..f226189ba6 100644 --- a/src/Umbraco.Web/Editors/StylesheetController.cs +++ b/src/Umbraco.Web/Editors/StylesheetController.cs @@ -21,7 +21,7 @@ namespace Umbraco.Web.Editors { return StyleSheet.GetAll() .Select(x => - new Stylesheet() { + new Stylesheet() { Name = x.Text, Id = x.Id, Path = SystemDirectories.Css + "/" + x.Text + ".css" @@ -36,5 +36,16 @@ namespace Umbraco.Web.Editors return css.Properties.Select(x => new StylesheetRule() { Id = x.Id, Name = x.Text, Selector = x.Alias }); } + + public IEnumerable GetRulesByName(string name) + { + var css = StyleSheet.GetByName(name); + + if (css == null) + throw new HttpResponseException(System.Net.HttpStatusCode.NotFound); + + return css.Properties.Select(x => new StylesheetRule() { Id = x.Id, Name = x.Text, Selector = x.Alias }); + } } + }