diff --git a/README.md b/README.md index 553a16335..2127444be 100644 --- a/README.md +++ b/README.md @@ -124,9 +124,6 @@ You could also grab the content directly from the element with `fromElement` pro For more practical example I suggest to look up the code inside this demo: http://grapesjs.com/demo.html - - - ## Development GrapesJS uses [Webpack](https://github.com/webpack/webpack) as a module bundler and [Babel](https://github.com/babel/babel) as a compiler. diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 0aedb93ac..f93097d02 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -97,23 +97,7 @@ module.exports = Backbone.View.extend({ const colorWarn = '#ffca6f'; - let baseCss = ` - * { - box-sizing: border-box; - } - html, body, #wrapper { - min-height: 100%; - } - body { - margin: 0; - height: 100%; - background-color: #fff - } - #wrapper { - overflow: auto; - overflow-x: hidden; - } - `; + // I need all this styles to make the editor work properly // Remove `html { height: 100%;}` from the baseCss as it gives jumpings // effects (on ENTER) with RTE like CKEditor (maybe some bug there?!?) // With `body {height: auto;}` jumps in CKEditor are removed but in @@ -121,10 +105,8 @@ module.exports = Backbone.View.extend({ // `body {height: 100%;}`. // For the moment I give the priority to Firefox as it might be // CKEditor's issue - - // I need all this styles to make the editor work properly var frameCss = ` - ${baseCss} + ${em.config.baseCss || ''} .${ppfx}dashed *[data-highlightable] { outline: 1px dashed rgba(170,170,170,0.7); @@ -171,18 +153,6 @@ module.exports = Backbone.View.extend({ cursor: -webkit-grabbing; } - * ::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.1) - } - - * ::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2) - } - - * ::-webkit-scrollbar { - width: 10px - } - ${conf.canvasCss || ''} ${protCss || ''} `; diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 09bd8f2b9..bd0786b70 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -30,6 +30,40 @@ module.exports = { // Width for the editor container width: '100%', + // By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0 + // and sets a default background color of white. This CSS is desired in most cases. + // use this property if you wish to overwrite the base CSS to your own CSS. This is most + // useful if for example your template is not based off a document with 0 as body margin. + baseCss: ` + * { + box-sizing: border-box; + } + html, body, #wrapper { + min-height: 100%; + } + body { + margin: 0; + height: 100%; + background-color: #fff + } + #wrapper { + overflow: auto; + overflow-x: hidden; + } + + * ::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.1) + } + + * ::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2) + } + + * ::-webkit-scrollbar { + width: 10px + } + `, + // CSS that could only be seen (for instance, inside the code viewer) protectedCss: '* { box-sizing: border-box; } body {margin: 0;}', diff --git a/test/helper.js b/test/helper.js index 1a7db08bc..6231ba6e1 100644 --- a/test/helper.js +++ b/test/helper.js @@ -3,7 +3,9 @@ import expect from 'expect'; import sinon from 'sinon'; import { JSDOM } from 'jsdom'; -const dom = new JSDOM(''); +const dom = new JSDOM('', { + resources: 'usable' +}); const window = dom.window; // Fix for the require of jquery diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index 110ef6c76..d5c9fd8fd 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -79,6 +79,32 @@ describe('GrapesJS', () => { expect(editor.getStyle().length).toEqual(0); }); + it('Editor canvas baseCSS can be overwritten', () => { + config.components = htmlString; + config.baseCss = '#wrapper { background-color: #eee; }'; + config.protectedCss = ''; + + var editor = obj.init(config); + + expect(window.frames[0].document.documentElement.outerHTML).toInclude( + config.baseCss + ); + expect(window.frames[0].document.documentElement.outerHTML) + .toNotInclude(`body { + margin: 0;`); + }); + + it('Editor canvas baseCSS defaults to sensible values if not defined', () => { + config.components = htmlString; + config.protectedCss = ''; + + var editor = obj.init(config); + + expect(window.frames[0].document.documentElement.outerHTML) + .toInclude(`body { + margin: 0;`); + }); + it('Init editor with html', () => { config.components = htmlString; var editor = obj.init(config);