GrapesJS v0.4.30 + Filestack Plugin

demo.html

@@ -8,6 +8,8 @@
     <link rel="stylesheet" href="stylesheets/grapesjs-preset-webpage.css">
     <link rel="stylesheet" href="stylesheets/tooltip.css">
     <link rel="stylesheet" href="stylesheets/perfect-scrollbar.css">
+    <link rel="stylesheet" href="stylesheets/grapesjs-plugin-filestack.css">
+    <script src="https://static.filestackapi.com/v3/filestack-0.1.12.js"></script>
     <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
     <script src="js/perfect-scrollbar.min.js"></script>
     <script src="js/toastr.min.js"></script>
@@ -906,8 +908,10 @@
         }
       </style>
     </div>
+
     <script src="js/grapes.min.js"></script>
     <script src="js/grapesjs-plugin-export.min.js"></script>
+    <script src="js/grapesjs-plugin-filestack.min.js"></script>
     <script src="js/grapesjs-preset-webpage.js"></script>
     <script type="text/javascript">
 
@@ -925,7 +929,13 @@
       container : '#gjs',
       fromElement: 1,
       showOffsets: 1,
-      plugins: ['gjs-plugin-export', 'gjs-preset-webpage'],
+      plugins: ['gjs-plugin-export', 'gjs-preset-webpage', 'gjs-plugin-filestack'],
+
+      pluginsOpts: {
+        'gjs-plugin-filestack': {
+          key: 'A1nL8omiAR8W7pHi3cotzz',
+        }
+      },
 
       // Insert some default images
       assetManager: {

js/grapesjs-plugin-filestack.min.js

@@ -0,0 +1,2 @@
+/*! grapesjs-plugin-filestack - 0.0.2 */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["grapesjs-plugin-filestack"]=t():e["grapesjs-plugin-filestack"]=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t){"use strict";grapesjs.plugins.add("gjs-plugin-filestack",function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t,o=e.getConfig(),r=o.stylePrefix||"",i=void 0,s={key:"",btnEl:"",btnText:"Add images",filestackOpts:{accept:"image/*",maxFiles:10},onComplete:function(e,t){}};for(var a in s)a in n||(n[a]=s[a]);if(!filestack)throw new Error("Filestack instance not found");if(!n.key)throw new Error("Filestack's API key not found");var l=filestack.init(n.key);e.on("run:open-assets",function(){var t=e.Modal,o=t.getContentEl(),s=o.querySelector("."+r+"am-file-uploader"),a=o.querySelector("."+r+"am-assets-header"),f=o.querySelector("."+r+"am-assets-cont");s&&(s.style.display="none"),a&&(a.style.display="none"),f.style.width="100%",i||(i=n.btnEl,i||(i=document.createElement("button"),i.className=r+"btn-prim "+r+"btn-filestack",i.innerHTML=n.btnText),i.onclick=function(){l.pick(n.filestackOpts).then(function(e){var t=e.filesUploaded,o=t instanceof Array?t:[t],r=c(o);n.onComplete(o,r)})}),f.insertBefore(i,a)});var c=function(t){var n=t.map(function(e){return e.src=e.url,e});return e.AssetManager.add(n)}})}])});

stylesheets/grapesjs-plugin-filestack.css

@@ -0,0 +1,33 @@
+.gjs-am-assets-cont .gjs-am-asset-image {
+  border-bottom: none;
+  float: left;
+  width: 20%;
+  height: 150px;
+  box-sizing: border-box;
+  border-radius: 3px;
+  overflow: hidden; }
+
+.gjs-am-assets-cont #gjs-am-meta,
+.gjs-am-assets-cont #gjs-am-preview-cont {
+  width: 100%; }
+
+.gjs-am-assets-cont #gjs-am-preview-cont {
+  height: 100px; }
+
+.gjs-am-assets-cont #gjs-am-close {
+  right: 10px;
+  top: 10px;
+  z-index: 1;
+  line-height: 0; }
+
+.gjs-btn-filestack {
+  margin-bottom: 10px; }
+
+.gjs-am-assets-cont {
+  height: 400px; }
+
+.gjs-am-assets {
+  height: 345px;
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 5px;
+  margin: 0 -10px; }