GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.36k stars 4.05k forks source link

[QUESTION] How to dynamically add assets from the server after editor initialization? #1788

Closed ovesyan19 closed 5 years ago

ovesyan19 commented 5 years ago

Hi! Thanks for the work you've done building this cool library! I am using latest angular and stuck with issue when I open image library in editor and there is no collection. Collection will go from the server. When I add some image then I see whole images set that were saved before, but at first time collection is empty, how can I do this?

this.editor = grapesjs.init({
            container: '#wiq-content-editor',
            height: '100vh',
            components: content,
            css: styles,
            style: styles,
            plugins: ['gjs-preset-webpage'],
            storageManager: {
                id: 'wiq-content-editor-',
                type: 'local',
                autosave: false,
                autoload: false
            },
            colorPicker: {
                appendTo: 'parent',
                offset: {
                    top: 26,
                    left: -166
                }
            },
            assetManager: {
                storeAfterUpload: true,
                upload: this.apiUrl + '/files',
                uploadFile: (e) => {
                    let files = e.target.files;
                    let formData = new FormData();

                    formData.append('category', 'content');

                    Object.keys(files).forEach(fileIndex => {
                        formData.append('file', files[fileIndex], files[fileIndex].name);
                    });

                    this.postFiles(formData);
                }
            }
        });
        grapesjs.plugins.add('gjs-preset-webpage', require('grapesjs-preset-webpage').default);
        this.assetManager = this.editor.AssetManager;

res.items.forEach(element => {
                    this.assetManager.add({
                        type: element.category,
                        src: element.url,
                        height: element.height,
                        width: element.width
                    });
                });
lock[bot] commented 4 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.