Add the possibility to add external css in the canvas

index.html

@@ -1172,7 +1172,7 @@ <h1 class="bdg-title">The team</h1>
       }
     },
   });
-  
+
     editor.render();
     </script>
   </body>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.8.13",
+  "version": "0.8.14",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/canvas/config/config.js

@@ -6,9 +6,22 @@ module.exports = {
   rulers: false,
 
   /*
-   * append scripts in head of iframe before renderBody content
-   * need to manually maintain the same scripts in cms's render template
+   * Append external scripts in head of the iframe before renderBody content
+   * In this case, you have to add them manually later in the final HTML page
+   * @example
+   * scripts: [
+   *  'https://...',
+   * ]
   */
-  scripts: []
+  scripts: [],
+
+  /*
+   * Append external styles. This styles won't be added to the final HTML/CSS
+   * @example
+   * styles: [
+   *  'https://...',
+   * ]
+  */
+  styles: [],
 
 };

src/canvas/view/CanvasView.js

@@ -67,7 +67,13 @@ module.exports = Backbone.View.extend({
       var body = this.frame.$el.contents().find('body');
       var cssc = em.get('CssComposer');
       var conf = em.get('Config');
+      var confCanvas = conf.canvas;
       var protCss = conf.protectedCss;
+      var externalStyles = '';
+
+      confCanvas.styles.forEach((style) => {
+        externalStyles += `<link rel="stylesheet" href="${style}"/>`;
+      });
 
       // I need all this styles to make the editor work properly
       var frameCss = '* {box-sizing: border-box;} body{margin:0;height:auto;background-color:#fff} #wrapper{min-height:100%; overflow:auto}' +
@@ -83,6 +89,11 @@ module.exports = Backbone.View.extend({
         '* ::-webkit-scrollbar {width: 10px}' +
         (conf.canvasCss || '');
       frameCss += protCss || '';
+
+      if (externalStyles) {
+        body.append(externalStyles);
+      }
+
       body.append('<style>' + frameCss + '</style>');
       body.append(wrap.render()).append(cssc.render());
       body.append(this.getJsContainer());