Add width and height property

10 years ago · 2dee38c2c3
10 changed files with 43 additions and 41 deletions
--- a/README.md
+++ b/README.md
@ -116,7 +116,7 @@ You could also grab the content directly from the element with `fromElement` pro
 </script>
 ```

-Unfortunately with the configuration above you wouldn't see a lot. This because GrapesJS it self is simply empty, adding panels, buttons and other stuff will be your job (actually it's not empty but you need buttons to show them up).
+Unfortunately with the configuration above you wouldn't see a lot. This because GrapesJS itself is empty, adding panels, buttons and other stuff will be your job (actually it's not empty but you need buttons to show them up).
 The section below will explain some basic configurations but for a more practical example I suggest to look up the code inside this demo: http://grapesjs.com/demo.html


--- a/dist/css/grapes.min.css
+++ b/dist/css/grapes.min.css
--- a/dist/grapes.min.js
+++ b/dist/grapes.min.js
--- a/index.html
+++ b/index.html
@ -7,8 +7,11 @@
 		<link rel="stylesheet" href="vendor/codemirror/lib/codemirror.css">
 		<link rel="stylesheet" href="vendor/codemirror/theme/hopscotch.css">
 	</head>
+	<style>
+		body, html{ height: 100%; margin: 0;}
+	</style>
 	<body>
-		<div id="wte-app"></div>
+		<div id="gjs"></div>
 		<script data-main="src/demo" src="vendor/require/require.js"></script>
 	</body>
 </html>
--- a/src/demo.js
+++ b/src/demo.js
--- a/src/editor/config/config.js
+++ b/src/editor/config/config.js
@ -28,6 +28,12 @@ define(function () {
 		// Enable/Disable undo manager
 		undoManager: true,

+		// Height for the editor container
+		height: '900px',
+
+		// Width for the editor container
+		width: '100%',
+
 		//Indicates which storage to use. Available: local | remote | none (!)
 		storageType: 'local',

--- a/src/editor/view/EditorView.js
+++ b/src/editor/view/EditorView.js
@ -17,6 +17,12 @@ function(Backbone){
 			var conf = this.model.config;
 			this.$cont	= $(conf.el || ('body ' + conf.container));

+			if(conf.width)
+				this.$cont.css('width', conf.width);
+
+			if(conf.height)
+				this.$cont.css('height', conf.height);
+
 			this.model.set('$editor', this.$el);

 			if(this.cv)
--- a/src/grapesjs/main.js
+++ b/src/grapesjs/main.js
@ -67,6 +67,7 @@ define(function (require) {
      },

    };
+
  }();

 });
--- a/styles/css/main.css
+++ b/styles/css/main.css
@ -2580,14 +2580,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); }

 /********************* MAIN ************************/
-body {
-  background-color: #eee;
-  font-family: Helvetica, sans-serif;
-  margin: 0; }
-
-html, body, #wte-app, .wte-editor {
-  height: 100%; }
-
 .clear {
  clear: both; }

@ -2599,16 +2591,15 @@ html, body, #wte-app, .wte-editor {
  -o-user-select: none;
  user-select: none; }

-#wte-app {
-  height: 100%;
-  min-width: 1250px; }
-
 .wte-editor {
+  font-family: Helvetica, sans-serif;
  position: relative;
  border: 3px solid #444;
  border-left: none;
  border-right: none;
-  box-sizing: border-box; }
+  box-sizing: border-box;
+  height: 100%;
+  min-width: 1250px; }

 /*************  CANVAS  ****************/
 .wte-cv-canvas {
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@ -72,26 +72,19 @@ $imageCompDim:	50px;
 }

 /********************* MAIN ************************/
-body{
-	background-color:	$fontColor;
-	font-family: 		$mainFont;
-	margin: 0;
-}
-html,body,#wte-app, .#{$app-prefix}editor{ height: 100%; }
 .clear{ clear:both }
 .no-select{
 	@include user-select(none);
 }
-#wte-app{
-	height: 100%;
-	min-width: 1250px;
-}
 .#{$app-prefix}editor{
+	font-family: $mainFont;
 	position:relative;
 	border: 3px solid $mainColor;
 	border-left:none;
 	border-right:none;
 	box-sizing: border-box;
+	height: 100%;
+	min-width: 1250px;
 }
 /*************  CANVAS  ****************/
 .#{$cv-prefix}canvas {