Add getHtml and getCss

src/css_composer/main.js

@@ -18,8 +18,10 @@ define(function(require) {
         c[name] = def[name];
     }
 
-    var rules = new CssRules(c.defaults, c),
-    rulesView = new CssRulesView({
+    var rules = new CssRules([], c);
+    rules.add(c.defaults);
+
+    var rulesView = new CssRulesView({
       collection: rules,
       config: c,
     });

src/css_composer/model/CssRules.js

@@ -7,6 +7,10 @@ define(['backbone','./CssRule'],
 
       initialize: function(models, opt){
 
+        // Inject editor
+        if(opt && opt.sm)
+          this.editor = opt.sm;
+
         this.model  = function(attrs, options) {
           var model;
 
@@ -23,5 +27,12 @@ define(['backbone','./CssRule'],
 
       },
 
+      add: function(models, opt){
+        if(typeof models === 'string')
+          models = this.editor.Parser.parseCss(models);
+
+        return Backbone.Collection.prototype.add.apply(this, [models, opt]);
+      },
+
     });
 });

src/editor/main.js

@@ -5,35 +5,79 @@ define(function (require){
 		 *
 		 * @return	{Object}
 	 	 * */
-		var Grapes	= function(config)
-		{
-			var c			= config || {},
-			defaults		= require('./config/config'),
-			Editor			= require('./model/Editor'),
-			EditorView		= require('./view/EditorView');
+		var Editor = function(config) {
+			var c = config || {},
+			defaults = require('./config/config'),
+			Editor = require('./model/Editor'),
+			EditorView = require('./view/EditorView');
 
 			for (var name in defaults) {
 				if (!(name in c))
 					c[name] = defaults[name];
 			}
 
-			this.editor		= new Editor(c);
-			var obj				= {
-					model	: this.editor,
-			    	config	: c,
+			var editorModel = new Editor(c);
+			var obj = {
+					model	: editorModel,
+			    config	: c,
 			};
 
-		  this.editorView = new EditorView(obj);
-		};
+		  var editorView = new EditorView(obj);
 
-		Grapes.prototype	= {
+		  var DomComponents = editorModel.get('Components');
+		  var CssComposer = editorModel.get('CssComposer');
 
-			render		: function()
-			{
-				return	this.editorView.render().$el;
-			}
+		  return {
+
+		  	editor: editorModel,
+
+				DomComponents: DomComponents,
+
+				/**
+				 * @property {CssComposer}
+				 * @type {[type]}
+				 */
+				CssComposer: CssComposer,
+
+				/**
+				 * Returns HTML built inside canvas
+				 * @return {string} HTML string
+				 */
+				getHtml: function(){
+					editorModel.getHtml();
+				},
+
+				/**
+				 * Returns CSS built inside canvas
+				 * @return {string} CSS string
+				 */
+				getCss: function(){
+					editorModel.getCss();
+				},
+
+				/**
+				 * Returns components in JSON format object
+				 * @return {Object}
+				 */
+				getComponents: function(){
+					return editorModel.get('Components').getComponents();
+				},
+
+				/**
+				 * Returns style in JSON format object
+				 * @return {Object}
+				 */
+				getStyle: function(){
+					return editorModel.get('CssComposer').getRules();
+				},
+
+				render: function() {
+					return	editorView.render().$el;
+				},
+
+			};
 
 		};
 
-		return Grapes;
+		return Editor;
 });

src/editor/model/Editor.js

@@ -89,11 +89,15 @@ define([
 			 * @private
 			 * */
 			initCssComposer: function() {
+				this.config.cssComposer.defaults = this.config.style;
 				var cfg = this.config.cssComposer,
-				df = this.loadRules();
+				df = '';
 				pfx	= cfg.stylePrefix || 'css-';
 				cfg.stylePrefix	= this.config.stylePrefix + pfx;
 
+				if(this.StorageManager.getConfig().autoload)
+					df = this.loadRules();
+
 				if(df)
 					cfg.defaults = df;
 
@@ -166,10 +170,15 @@ define([
 			 * @private
 			 * */
 			initComponents: function() {
+				this.config.domComponents.components = this.config.components;
 				var cfg = this.config.domComponents,
-				comp = this.loadComponents(),
+				comp = '',
 				cmpStylePfx	= cfg.stylePrefix || 'comp-';
 
+				if(this.StorageManager.getConfig().autoload)
+					comp = this.loadComponents();
+
+
 				cfg.stylePrefix	= this.config.stylePrefix + cmpStylePfx;
 
 				if(comp)
@@ -235,7 +244,7 @@ define([
 			 * @private
 			 * */
 			initStorage: function() {
-				this.stm = new StorageManager(this.config.storageManager);
+				this.stm = new StorageManager(this.config.storage || this.config.storageManager);
 				this.StorageManager = this.stm;
 				this.stm.loadDefaultProviders().setCurrent(this.config.storageType);
 				this.set('StorageManager', this.stm);
@@ -520,6 +529,14 @@ define([
 					this.componentsUpdated();
 			},
 
+			/**
+			 * Returns model of the selected component
+			 * @return {Component|null}
+			 */
+			getSelected: function(){
+				return this.get('selectedComponent');
+			},
+
 			/**
 			 * Set components inside editor's canvas. This method overrides actual components
 			 * @param {Object|string} components HTML string or components model
@@ -630,7 +647,8 @@ define([
 				var comps = [];
 
 				console.log(result);
-				//this.setComponents(comps);
+				//this.setComponents(result.components || result.html);
+				//this.setStyle(result.styles || result.css);
 			},
 
 			/**

src/grapesjs/config/config.js

@@ -27,6 +27,9 @@ define(function () {
     storage:{
         id: '',
         type: '',
+
+        // Indicates if load data inside editor after init
+        autoload: 1,
     },
 
     // Array of plugins to init

src/storage_manager/config/config.js

@@ -7,6 +7,9 @@ define(function () {
 		// Enable/Disable autosaving
 		autosave: 1,
 
+		// Indicates if load data inside editor after init
+    autoload: 1,
+
 		// Indicates which storage to use. Available: local | remote
 		storageType: 'local',
 

test/specs/grapesjs/main.js

@@ -6,13 +6,33 @@ define(['GrapesJS', 'PluginManager'],
     describe('Main', function() {
 
       var obj;
+      var fixtures;
+      var fixture;
+      var editorName;
+      var htmlString;
+      var config;
+
+      before(function () {
+        editorName = 'editor-fixture';
+        fixtures = $("#fixtures");
+      });
 
       beforeEach(function () {
+        htmlString =  '<div class="test1"></div><div class="test2"></div>';
+        cssString =  '.test2{color:red} .test3{color:blue}';
+        documentEl = '<style>' + cssString + '</style>' + htmlString;
+        config = {
+          container: '#' + editorName,
+          storage: { autoload: 0 },
+        }
         obj = new GrapesJS();
+        fixture = $('<div id="' + editorName + '"></div>');
+        fixture.empty().appendTo(fixtures);
       });
 
       afterEach(function () {
         delete obj;
+        delete fixture;
       });
 
       it('main object should be loaded', function() {
@@ -24,6 +44,45 @@ define(['GrapesJS', 'PluginManager'],
         editor.should.not.be.empty;
       });
 
+      it('New editor is empty', function() {
+        var editor = obj.init(config);
+        var html = editor.getHtml();
+        var css = editor.getCss();
+        (html ? html : '').should.be.empty;
+        (css ? css : '').should.be.empty;
+        editor.getComponents().length.should.equal(0);
+        editor.getStyle().length.should.equal(0);
+      });
+
+      it('Init editor with html', function() {
+        config.components = htmlString;
+        var editor = obj.init(config);
+        var comps = editor.DomComponents.getComponents();
+        comps.length.should.equal(2);
+        comps.at(0).get('classes').at(0).get('name').should.equal('test1');
+      });
+
+      it('Init editor with css', function() {
+        config.style = cssString;
+        var editor = obj.init(config);
+        console.log(editor.CssComposer.getRules());
+        var rules = editor.CssComposer.getRules();
+        rules.length.should.equal(2);
+        rules.at(0).get('selectors').at(0).get('name').should.equal('test2');
+      });
+
+      it('Init editor from element', function() {
+        config.fromElement = 1;
+        fixture.html(documentEl);
+        var editor = obj.init(config);
+        var html = editor.getHtml();
+        var css = editor.getCss();
+        (html ? html : '').should.equal(htmlString);
+        (css ? css : '').should.be.empty;
+        editor.getComponents().length.should.equal(0);
+        editor.getStyle().length.should.equal(0);
+      });
+
     });
 
   });