Add fromElement property

src/css_composer/model/CssRules.js

@@ -30,7 +30,6 @@ 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

@@ -44,7 +44,7 @@ define(function (require){
 				 * @return {string} HTML string
 				 */
 				getHtml: function(){
-					editorModel.getHtml();
+					return editorModel.getHtml();
 				},
 
 				/**
@@ -52,7 +52,7 @@ define(function (require){
 				 * @return {string} CSS string
 				 */
 				getCss: function(){
-					editorModel.getCss();
+					return editorModel.getCss();
 				},
 
 				/**

src/editor/model/Editor.js

@@ -43,14 +43,14 @@ define([
 			},
 
 			initialize: function(c) {
-				this.config = c;
+				this.config = _.clone(c);
 				this.pfx = this.config.storagePrefix;
 				this.compName	= this.pfx + 'components' + this.config.id;
 				this.rulesName	= this.pfx + 'rules' + this.config.id;
 				this.set('Config', c);
 
-				//console.log(c);
-				//getCacheLoad
+				if(c.el && c.fromElement)
+					this.config.components = c.el.innerHTML;
 
 				this.initParser();
 				this.initStorage();
@@ -61,10 +61,10 @@ define([
 				this.initCommands();
 				this.initPanels();
 				this.initRichTextEditor();
+				this.initCssComposer();
 				this.initComponents();
 				this.initCanvas();
 				this.initUndoManager();
-				this.initCssComposer();
 				this.initUtils();
 
 				this.on('change:selectedComponent', this.componentSelected, this);
@@ -92,9 +92,8 @@ define([
 			 * @private
 			 * */
 			initCssComposer: function() {
-				if(this.config.style)
-					this.config.cssComposer.defaults = this.config.style;
-				var cfg = this.config.cssComposer,
+				var elStyle = this.config.style || '';
+				var cfg = _.clone(this.config.cssComposer),
 				df = '';
 				pfx	= cfg.stylePrefix || 'css-';
 				cfg.stylePrefix	= this.config.stylePrefix + pfx;
@@ -102,6 +101,9 @@ define([
 				if(this.StorageManager.getConfig().autoload)
 					df = this.loadRules();
 
+				if(elStyle)
+					cfg.defaults = elStyle;
+
 				if(df)
 					cfg.defaults = df;
 

src/editor/view/EditorView.js

@@ -14,8 +14,8 @@ function(Backbone){
 
 		render: function(){
 			this.$el.empty();
-
-			this.$cont	= $('body ' + this.model.config.container);
+			var conf = this.model.config;
+			this.$cont	= $(conf.el || ('body ' + conf.container));
 
 			this.model.set('$editor', this.$el);
 

test/specs/grapesjs/main.js

@@ -19,7 +19,7 @@ define(['GrapesJS', 'PluginManager', 'chai'],
 
       beforeEach(function () {
         htmlString =  '<div class="test1"></div><div class="test2"></div>';
-        cssString =  '.test2{color:red} .test3{color:blue}';
+        cssString =  '.test2{color:red}.test3{color:blue}';
         documentEl = '<style>' + cssString + '</style>' + htmlString;
         config = {
           container: '#' + editorName,
@@ -32,7 +32,8 @@ define(['GrapesJS', 'PluginManager', 'chai'],
 
       afterEach(function () {
         delete obj;
-        delete fixture;
+        delete config;
+        fixture.remove();
       });
 
       it('main object should be loaded', function() {
@@ -70,18 +71,16 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         rules.at(0).get('selectors').at(0).get('name').should.equal('test2');
       });
 
-      it.skip('Init editor from element', function() {
+      it('Init editor from element', function() {
         config.fromElement = 1;
         fixture.html(documentEl);
-        console.log('START');
         var editor = obj.init(config);
-        console.log('END');
         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);
+        (css ? css : '').should.equal('.test2{color:red;}');// .test3 is discarded in css
+        editor.getComponents().length.should.equal(2);
+        editor.getStyle().length.should.equal(2);// .test3 is still here
       });
 
     });