diff --git a/src/code_manager/index.js b/src/code_manager/index.js index 4c3a69192..e7e3bcb47 100644 --- a/src/code_manager/index.js +++ b/src/code_manager/index.js @@ -187,7 +187,7 @@ module.exports = () => { * @example * var codeStr = codeManager.getCode(model, 'html'); * */ - getCode(model, genId, opt) { + getCode(model, genId, opt = {}) { var generator = this.getGenerator(genId); return generator ? generator.build(model, opt) : ''; }, diff --git a/src/code_manager/model/HtmlGenerator.js b/src/code_manager/model/HtmlGenerator.js index 3bce93f0e..d7087cbfa 100644 --- a/src/code_manager/model/HtmlGenerator.js +++ b/src/code_manager/model/HtmlGenerator.js @@ -2,18 +2,23 @@ var Backbone = require('backbone'); module.exports = Backbone.Model.extend({ - /** @inheritdoc */ - build(model, cssc) { - var coll = model.get('components') || model, - code = ''; + build(model, opts = {}) { + const models = model.get('components'); - coll.each(m => { - code += m.toHTML({ - cssc - }); - }, this); + if (opts.exportWrapper) { + return opts.wrappesIsBody ? + `${this.buildModels(models)}` : model.toHTML(); + } - return code; + return this.buildModels(models); }, + buildModels(models) { + let code = ''; + models.each(model => { + code += model.toHTML(); + }); + return code; + } + }); diff --git a/src/dom_components/config/config.js b/src/dom_components/config/config.js index 5e0b5cdfc..600f4a555 100644 --- a/src/dom_components/config/config.js +++ b/src/dom_components/config/config.js @@ -7,6 +7,8 @@ module.exports = { // Default wrapper configuration wrapper: { + wrapper: 1, + style: {margin: 0}, removable: false, copyable: false, draggable: false, diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 947a4ad58..30184c298 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -23,9 +23,6 @@ module.exports = { // Clear the canvas when editor.render() is called clearOnRender: false, - // Return JS of components inside HTML from 'editor.getHtml()' - jsInHtml: true, - // On creation of a new Component (via object), if the 'style' attribute is not // empty, all those roles will be moved in its new class forceClass: true, @@ -37,7 +34,7 @@ module.exports = { width: '100%', // CSS that could only be seen (for instance, inside the code viewer) - protectedCss: '*{box-sizing: border-box;} body{margin: 0;}', + protectedCss: '*{box-sizing: border-box;}', // CSS for the iframe which containing the canvas, useful if you need to custom something inside // (eg. the style of the selected component) @@ -72,6 +69,15 @@ module.exports = { // elements inside canvas loadCompsOnRender: 1, + // Return JS of components inside HTML from 'editor.getHtml()' + jsInHtml: true, + + // Show the wrapper component in the final code, eg. in editor.getHtml() + exportWrapper: 0, + + // The wrapper, if visible, will be shown as a `` + wrappesIsBody: 1, + // Dom element el: '', diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index a76f6c8bd..f0bf6751b 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -406,10 +406,15 @@ module.exports = Backbone.Model.extend({ * @private */ getHtml() { - var js = this.config.jsInHtml ? this.getJs() : ''; + const config = this.config; + const exportWrapper = config.exportWrapper; + const wrappesIsBody = config.wrappesIsBody; + const js = config.jsInHtml ? this.getJs() : ''; var wrp = this.get('DomComponents').getComponent(); - var html = this.get('CodeManager').getCode(wrp, 'html'); - html += js ? '' : ''; + var html = this.get('CodeManager').getCode(wrp, 'html', { + exportWrapper, wrappesIsBody + }); + html += js ? `` : ''; return html; },