diff --git a/src/Umbraco.Core/Configuration/Models/RichTextEditorSettings.cs b/src/Umbraco.Core/Configuration/Models/RichTextEditorSettings.cs index 55fa7b2c5f..5631ab66d7 100644 --- a/src/Umbraco.Core/Configuration/Models/RichTextEditorSettings.cs +++ b/src/Umbraco.Core/Configuration/Models/RichTextEditorSettings.cs @@ -116,18 +116,18 @@ public class RichTextEditorSettings new Dictionary { ["entity_encoding"] = "raw" }; /// - /// HTML RichText Editor TinyMCE Commands + /// HTML RichText Editor TinyMCE Commands. /// /// WB-TODO Custom Array of objects public RichTextEditorCommand[] Commands { get; set; } = Default_commands; /// - /// HTML RichText Editor TinyMCE Plugins + /// HTML RichText Editor TinyMCE Plugins. /// public string[] Plugins { get; set; } = Default_plugins; /// - /// HTML RichText Editor TinyMCE Custom Config + /// HTML RichText Editor TinyMCE Custom Config. /// /// WB-TODO Custom Dictionary public IDictionary CustomConfig { get; set; } = Default_custom_config; @@ -138,7 +138,7 @@ public class RichTextEditorSettings public string ValidElements { get; set; } = StaticValidElements; /// - /// Invalid HTML elements for RichText Editor + /// Invalid HTML elements for RichText Editor. /// [DefaultValue(StaticInvalidElements)] public string InvalidElements { get; set; } = StaticInvalidElements; diff --git a/src/Umbraco.Web.UI.Client/src/less/main.less b/src/Umbraco.Web.UI.Client/src/less/main.less index 2fce7dfe65..cf284188f9 100644 --- a/src/Umbraco.Web.UI.Client/src/less/main.less +++ b/src/Umbraco.Web.UI.Client/src/less/main.less @@ -354,20 +354,25 @@ label:not([for]) { margin: 0 !important; } +.controls > .vertical-align-items, .controls-row > .vertical-align-items { display: flex; align-items: center; } +.controls > .vertical-align-items > input.umb-property-editor-tiny, +.controls > .vertical-align-items > input.umb-property-editor-small, .controls-row > .vertical-align-items > input.umb-property-editor-tiny, .controls-row > .vertical-align-items > input.umb-property-editor-small { - margin-left: 5px; - margin-right: 5px; + margin-left: 5px; + margin-right: 5px; } +.controls > .vertical-align-items > input.umb-property-editor-tiny:first-child +.controls > .vertical-align-items > input.umb-property-editor-small:first-child, .controls-row > .vertical-align-items > input.umb-property-editor-tiny:first-child .controls-row > .vertical-align-items > input.umb-property-editor-small:first-child { - margin-left: 0; + margin-left: 0; } .thumbnails .selected { 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 47d1f401c7..2a17974dcc 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,12 +1,12 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController", - function ($scope, $timeout, $log, tinyMceService, stylesheetResource, assetsService) { + function ($scope, $sce, tinyMceService, stylesheetResource, assetsService) { var cfg = tinyMceService.defaultPrevalues(); - if($scope.model.value){ - if(Utilities.isString($scope.model.value)){ + if($scope.model.value) { + if (Utilities.isString($scope.model.value)){ $scope.model.value = cfg; } - }else{ + }else { $scope.model.value = cfg; } @@ -23,14 +23,14 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController", $scope.model.value.mode = "classic"; } - tinyMceService.configuration().then(function(config){ - $scope.tinyMceConfig = config; - + tinyMceService.configuration().then(config => { + $scope.tinyMceConfig = config; + // extend commands with properties for font-icon and if it is a custom command - $scope.tinyMceConfig.commands = _.map($scope.tinyMceConfig.commands, function (obj) { - var icon = getFontIcon(obj.alias); - - var objCmd = Utilities.extend(obj, { + $scope.tinyMceConfig.commands = _.map($scope.tinyMceConfig.commands, obj => { + const icon = getIcon(obj.alias); + + const objCmd = Utilities.extend(obj, { fontIcon: icon.name, isCustom: icon.isCustom, selected: $scope.model.value.toolbar.indexOf(obj.alias) >= 0, @@ -39,9 +39,30 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController", return objCmd; }); + + assetsService.loadJs("lib/tinymce/icons/default/icons.js", $scope).then(() => { + const icons = tinymce.IconManager.get('default').icons; + const parser = new DOMParser(); + + Utilities.forEach($scope.tinyMceConfig.commands, cmd => { + let icon = getTinyIcon(cmd.alias); + + if (!cmd.isCustom && icons.hasOwnProperty(icon)) { + const svg = icons[icon]; + const frag = parser.parseFromString(svg, 'text/html').body.childNodes[0]; + const width = frag.getAttribute("width"); + const height = frag.getAttribute("height"); + + frag.setAttribute("viewBox", `0 0 ${width} ${height}`); + cmd.svgIcon = $sce.trustAsHtml(frag.outerHTML); + cmd.icon = null; + } + }); + }); + }); - stylesheetResource.getAll().then(function(stylesheets){ + stylesheetResource.getAll().then(stylesheets => { $scope.stylesheets = stylesheets; // if the CSS directory changes, previously assigned stylesheets are retained, but will not be visible @@ -59,14 +80,14 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController", $scope.selectCommand = function(command){ var index = $scope.model.value.toolbar.indexOf(command.alias); - if(command.selected && index === -1){ + if (command.selected && index === -1){ $scope.model.value.toolbar.push(command.alias); - }else if(index >= 0){ + }else if (index >= 0){ $scope.model.value.toolbar.splice(index, 1); } }; - $scope.selectStylesheet = function (css) { + $scope.selectStylesheet = css => { // find out if the stylesheet is already selected; first look for the full stylesheet path (current format) var index = $scope.model.value.stylesheets.indexOf(css.path); @@ -75,15 +96,80 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController", index = $scope.model.value.stylesheets.indexOf(css.name); } - if(index === -1){ + if (index === -1){ $scope.model.value.stylesheets.push(css.path); - }else{ + } else { $scope.model.value.stylesheets.splice(index, 1); } }; - // map properties for specific commands - function getFontIcon(alias) { + // Map command alias to icon name. + function getTinyIcon(alias) { + let icon = alias; + + switch (alias) { + case "ace": + case "code": + icon = "sourcecode"; + break; + case "anchor": + icon = "bookmark"; + break; + case "alignleft": + icon = "align-left"; + break; + case "aligncenter": + icon = "align-center"; + break; + case "alignright": + icon = "align-right"; + break; + case "alignjustify": + icon = "align-justify"; + break; + case "charmap": + icon = "insert-character"; + break; + case "hr": + icon = "horizontal-rule"; + break; + case "bullist": + icon = "unordered-list"; + break; + case "numlist": + icon = "ordered-list"; + break; + case "strikethrough": + icon = "strike-through"; + break; + case "removeformat": + icon = "remove-formatting"; + break; + case "blockquote": + icon = "quote"; + break; + case "forecolor": + icon = "text-color"; + break; + case "hilitecolor": + icon = "highlight-bg-color"; + break; + case "wordcount": + icon = "character-count"; + break; + case "emoticons": + icon = "emoji"; + break; + case "codesample": + icon = "code-sample"; + break; + } + + return icon; + } + + // Map properties for specific commands + function getIcon(alias) { var icon = { name: alias, isCustom: false }; switch (alias) { 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 96de0cd040..cc717a0486 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 @@ -5,22 +5,21 @@ + + + {{cmd.name}}
- -