const editor = grapesjs.init({ container: '#gjs', fromElement: true, height: '100%', storageManager: false, noticeOnUnload: false, plugins: ['gjs-blocks-basic'], assetManager: { custom: true, assets: [ 'https://via.placeholder.com/350x250/78c5d6/fff/image1.jpg', 'https://via.placeholder.com/350x250/459ba8/fff/image2.jpg', 'https://via.placeholder.com/350x250/79c267/fff/image3.jpg', 'https://via.placeholder.com/350x250/c5d647/fff/image4.jpg', 'https://via.placeholder.com/350x250/f28c33/fff/image5.jpg', 'https://via.placeholder.com/350x250/e868a2/fff/image6.jpg', 'https://via.placeholder.com/350x250/cc4360/fff/image7.jpg', ], }, }); const pagesApp = new Vue({ el: '.assets-wrp', data: { assets: [] }, mounted() { editor.on('asset:custom', this.handleAssets); }, destroyed() { editor.off('asset:custom', this.handleAssets); }, methods: { handleAssets(props) { props.container.appendChild(this.$el); this.assets = props.assets; this.select = props.select; this.remove = props.remove; }, } });
<div id="gjs"> <div style="padding: 25px">Double click on the image below to open the custom Asset Manager</div> <img src="https://via.placeholder.com/350x250/78c5d6/fff/image1.jpg" /> </div> <div style="display: none;"> <!-- Vue app for assets --> <div class="assets-wrp"> <div class="assets"> <div v-for="asset in assets" :key="asset.getSrc()" class="asset" @click="select(asset)" @dblclick="select(asset, true)"> <img class="asset-img" :src="asset.getSrc()" /> <div class="asset-over"> <div>Select</div> <div class="asset-name">{{ asset.getFilename() }}</div> </div> <div class="asset-remove" @click.stop="remove(asset)">Remove</div> </div> </div> </div> </div>
body, html { margin: 0; height: 100%; } .assets-wrp { margin-top: 15px; min-height: 300px; } .asset-img { max-width: 100%; display: block; } .asset { width: 16.66%; height: 90px; overflow: hidden; border-radius: 5px; margin-bottom: 20px; cursor: pointer; position: relative; } .assets { display: flex; flex-wrap: wrap; gap: 4.15%; } .asset-over { position: absolute; width: 100%; height: 100%; opacity: 0; top: 0; left: 0; background-color: rgb(0 0 0 / 70%); transition: opacity 0.3s ease-in-out; display: flex; justify-content: flex-end; align-items: center; font-size: 12px; flex-direction: column; } .asset-remove { position: absolute; top: 0; right: 0; padding: 5px; font-size: 12px; opacity: 0; transition: opacity 0.3s ease-in-out; } .asset-name { margin-bottom: 10px; } .asset:hover .asset-over, .asset:hover .asset-remove { opacity: 1; }