Add setStyle method to the editor

src/editor/main.js

@@ -31,11 +31,13 @@ define(function (require){
 
 		  	editor: editorModel,
 
+		  	/**
+				 * @property {DomComponents}
+				 */
 				DomComponents: DomComponents,
 
 				/**
 				 * @property {CssComposer}
-				 * @type {[type]}
 				 */
 				CssComposer: CssComposer,
 
@@ -81,6 +83,16 @@ define(function (require){
 					return editorModel.get('CssComposer').getRules();
 				},
 
+				/**
+				 * Set style inside editor's canvas. This method overrides actual style
+				 * @param {Array<Object>|Object|string} style CSS string or style model
+				 * @return {this}
+				 */
+				setStyle: function(style){
+					editorModel.setStyle(style);
+					return this;
+				},
+
 				/**
 				 * Returns selected component, if there is one
 				 * @return {grapesjs.Component}
@@ -89,8 +101,12 @@ define(function (require){
 					return editorModel.getSelected();
 				},
 
+				/**
+				 * Render editor
+				 * @return {HTMLElement}
+				 */
 				render: function() {
-					return	editorView.render().$el;
+					return	editorView.render().el;
 				},
 
 			};

src/editor/model/Editor.js

@@ -573,7 +573,10 @@ define([
 			 * @return {this}
 			 */
 			setStyle: function(style){
-				//return this.CssComposer.setStyle(style);
+				var rules = this.CssComposer.getRules();
+				for(var i = 0, len = rules.length; i < len; i++)
+					rules.pop();
+				rules.add(style);
 				return this;
 			},
 

test/specs/grapesjs/main.js

@@ -95,6 +95,26 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         editor.getComponents().length.should.equal(3);
       });
 
+      it('Set style as CSS', function() {
+        var editor = obj.init(config);
+        editor.setStyle(cssString);
+        editor.setStyle(cssString);
+        var styles = editor.getStyle();
+        styles.length.should.equal(2);
+        styles.at(1).get('selectors').at(0).get('name').should.equal('test3');
+      });
+
+      it('Set style as as array of objects', function() {
+        var editor = obj.init(config);
+        editor.setStyle([
+          {selectors: ['test4']},
+          {selectors: ['test5']}
+        ]);
+        var styles = editor.getStyle();
+        styles.length.should.equal(2);
+        styles.at(1).get('selectors').at(0).get('name').should.equal('test5');
+      });
+
     });
 
   });