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

Adss new deciated CSS/Less file that loads only in the TinyMCE RTE for us to style macros & emebed stuff

Browse Source
This commit is contained in:
Warren Buckley
2019-09-17 12:49:34 +01:00
parent 00936b8732
commit 39d833c716
3 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Umbraco.Web.UI.Client/gulp/config.js
View File

@@ -9,14 +9,15 @@ module.exports = {
installer: { files: ["./src/less/installer.less"], out: "installer.css" },
nonodes: { files: ["./src/less/pages/nonodes.less"], out: "nonodes.style.min.css"},
preview: { files: ["./src/less/canvas-designer.less"], out: "canvasdesigner.css" },
umbraco: { files: ["./src/less/belle.less"], out: "umbraco.css" }
umbraco: { files: ["./src/less/belle.less"], out: "umbraco.css" },
rteContent: { files: ["./src/less/rte-content.less"], out: "rte-content.css" }
},
//js files for backoffie
//processed in the js task
js: {
preview: { files: ["./src/preview/**/*.js"], out: "umbraco.preview.js" },
installer: { files: ["./src/installer/**/*.js"], out: "umbraco.installer.js" },
installer: { files: ["./src/installer/**/*.js"], out: "umbraco.installer.js" },
filters: { files: ["./src/common/filters/**/*.js"], out: "umbraco.filters.js" },
resources: { files: ["./src/common/resources/**/*.js"], out: "umbraco.resources.js" },
services: { files: ["./src/common/services/**/*.js"], out: "umbraco.services.js" },
@@ -24,13 +25,13 @@ module.exports = {
//the controllers for views
controllers: {
files: [
files: [
"./src/views/**/*.controller.js",
"./src/*.controller.js"
], out: "umbraco.controllers.js"
},
//directives/components
//directives/components
// - any JS file found in common / directives or common/ components
// - any JS file found inside views that has the suffix .directive.js or .component.js
directives: {

8
src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
View File

@@ -94,6 +94,10 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
}
return $q.all(promises).then(function() {
// Always push our Umbraco RTE stylesheet
// So we can style macros, embed items etc...
stylesheets.push(`${Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath}/assets/css/rte-content.css`);
return $q.when({ stylesheets: stylesheets, styleFormats: styleFormats});
});
}
@@ -320,10 +324,6 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
//see http://archive.tinymce.com/wiki.php/Configuration:cache_suffix
cache_suffix: "?umb__rnd=" + Umbraco.Sys.ServerVariables.application.cacheBuster,
//this is used to style the inline macro bits, sorry hard coding this form now since we don't have a standalone
//stylesheet to load in for this with only these styles (the color is @pinkLight)
content_style: ".mce-content-body .umb-macro-holder { border: 3px dotted #f5c1bc; padding: 7px; display: block; margin: 3px; } .umb-rte .mce-content-body .umb-macro-holder.loading {background: url(assets/img/loader.gif) right no-repeat; background-size: 18px; background-position-x: 99%;}",
// This allows images to be pasted in & stored as Base64 until they get uploaded to server
paste_data_images: true,

32
src/Umbraco.Web.UI.Client/src/less/rte-content.less Normal file
View File

@@ -0,0 +1,32 @@
@import "variables.less";
.mce-content-body .umb-macro-holder {
border: 3px dotted @pinkLight;
padding: 7px;
display: block;
margin: 3px;
}
.umb-rte .mce-content-body .umb-macro-holder.loading {
background: url(assets/img/loader.gif) right no-repeat;
background-size: 18px; background-position-x: 99%;
}
.umb-rte .mceNonEditable.embeditem {
position:relative;
}
.umb-rte .mceNonEditable.embeditem::before {
z-index:1000;
width:100%;
height:100%;
position:absolute;
content:' ';
background:rgba(0,0,0,0.1);
}
.umb-rte .mceNonEditable.embeditem[data-mce-selected] {
outline: 2px solid @pinkLight;
}