Adds pre-value drop down for theme selection

This commit is contained in:
Shannon
2018-10-11 15:39:18 +02:00
parent 1902ebd989
commit 1597dce99e
5 changed files with 41 additions and 22 deletions

View File

@@ -116,6 +116,11 @@ function tinyMceService($log, $q, imageHelper, $locale, $http, $timeout, stylesh
return language;
}
/**
* Gets toolbars for the inlite theme
* @param {any} configuredToolbar
* @param {any} tinyMceConfig
*/
function getToolbars(configuredToolbar, tinyMceConfig) {
//the commands for selection/all
@@ -182,7 +187,7 @@ function tinyMceService($log, $q, imageHelper, $locale, $http, $timeout, stylesh
//create a baseline Config to exten upon
var config = {
selector: "#" + args.htmlId,
theme: "inlite",
theme: args.theme ? args.theme : "inlite",
inline: true,
plugins: plugins,
valid_elements: tinyMceConfig.validElements,
@@ -197,7 +202,7 @@ function tinyMceService($log, $q, imageHelper, $locale, $http, $timeout, stylesh
language: getLanguage(),
//this would be for a theme other than inlite
toolbar: args.toolbar,
toolbar: args.toolbar.join(" "),
//these are for the inlite theme to work
insert_toolbar: toolbars.insertToolbar,
selection_toolbar: toolbars.selectionToolbar,

View File

@@ -29,6 +29,7 @@
background-position-x: 99%;
}
/* This used to be in place but I'm not sure its needed ... */
/* TINYMCE IMAGE RESIZING LIMITS */

View File

@@ -74,7 +74,8 @@ angular.module("umbraco")
promises.push(tinyMceService.getTinyMceEditorConfig({
htmlId: $scope.textAreaHtmlId,
stylesheets: editorConfig.stylesheets,
toolbar: editorConfig.toolbar
toolbar: editorConfig.toolbar,
theme: editorConfig.theme
}));
//wait for queue to end

View File

@@ -19,6 +19,9 @@ angular.module("umbraco").controller("Umbraco.PrevalueEditors.RteController",
if (!$scope.model.value.maxImageSize && $scope.model.value.maxImageSize != 0) {
$scope.model.value.maxImageSize = cfg.maxImageSize;
}
if (!$scope.model.value.theme) {
$scope.model.value.theme = "inlite";
}
tinyMceService.configuration().then(function(config){
$scope.tinyMceConfig = config;

View File

@@ -1,32 +1,32 @@
<div ng-controller="Umbraco.PrevalueEditors.RteController" class="rte-editor-preval">
<umb-control-group label="Toolbar" hide-label="false">
<div ng-repeat="cmd in tinyMceConfig.commands">
<umb-control-group label="Toolbar" hide-label="false">
<div ng-repeat="cmd in tinyMceConfig.commands">
<label>
<input type="checkbox"
ng-checked="selected(cmd, cmd.alias, model.value.toolbar)"
ng-model="cmd.selected"
ng-change="selectCommand(cmd)" />
<input type="checkbox"
ng-checked="selected(cmd, cmd.alias, model.value.toolbar)"
ng-model="cmd.selected"
ng-change="selectCommand(cmd)" />
<!--<img ng-src="{{cmd.icon}}" />-->
<!--<img ng-src="{{cmd.icon}}" />-->
<i class="mce-ico" ng-class="(cmd.isCustom ? ' mce-i-custom ' : ' mce-i-') + cmd.fontIcon"></i>
{{cmd.name}}
</label>
</div>
</umb-control-group>
</div>
</umb-control-group>
<umb-control-group label="Stylesheets" hide-label="0">
<div ng-repeat="css in stylesheets">
<umb-control-group label="Stylesheets" hide-label="0">
<div ng-repeat="css in stylesheets">
<label>
<input type="checkbox"
ng-checked="selected(css, css.name, model.value.stylesheets)"
ng-model="css.selected"
ng-change="selectStylesheet(css)" />
{{css.name}}
<input type="checkbox"
ng-checked="selected(css, css.name, model.value.stylesheets)"
ng-model="css.selected"
ng-change="selectStylesheet(css)" />
{{css.name}}
</label>
</div>
</umb-control-group>
</div>
</umb-control-group>
<umb-control-group label="Dimensions" description="Width x Height">
<div class="vertical-align-items">
@@ -38,6 +38,15 @@
<umb-control-group label="Maximum size for inserted images" description="0 to disable resizing">
<div class="vertical-align-items">
<input type="number" min="0" ng-model="model.value.maxImageSize" class="umb-property-editor-tiny" placeholder="Width/Height" /> Pixels
</div>
</div>
</umb-control-group>
<umb-control-group label="Theme" description="Select classic or inline theme">
<div class="vertical-align-items">
<select ng-model="model.value.theme">
<option value="inlite">Inline</option>
<option value="modern">Classic</option>
</select>
</div>
</umb-control-group>
</div>