Возможно ли иметь несколько экземпляров grapesjs на одной странице? - PullRequest
Новая
       53

Возможно ли иметь несколько экземпляров grapesjs на одной странице?

2 голосов
/ 10 мая 2019

Я использую Boostrap 4 Tabs. На каждой вкладке у меня есть экземпляр grapesjs. Один использует плагин веб-страницы: 

const productEditor = grapesjs.init({
            container: '#gjs',
            fromElement: 1,
            showOffsets: 1,
            allowScripts: 1,
            plugins: ['gjs-preset-webpage'],
            pluginsOpts: {
                'gjs-preset-webpage': {
                    // ... other options
                }
            },
            storageManager: {
                id: 'gjs-',
                type: 'remote',
                autosave: false,
                autoload: true,
                stepsBeforeSave: 3,
                urlStore: '',
                urlLoad: '',
                contentTypeJson: true
            },
            canvas: {},
        });

другая вкладка использует плагин рассылки 

const newsletterEditor = grapesjs.init({
            container: '#newsletter-gjs',
            fromElement: 1,
            showOffsets: 1,
            allowScripts: 1,
            plugins: ['gjs-preset-newsletter'],
            pluginsOpts: {
                'gjs-preset-newsletter': {
                    modalTitleImport: 'Import template',
                    // ... other options
                }
            },
            storageManager: {
                id: 'gjs-',
                type: 'remote',
                autosave: false,
                autoload: true,
                stepsBeforeSave: 3,
                urlStore:'',
                urlLoad: '',
                contentTypeJson: true
            },
            canvas: {},
        });

Что я замечаю, что productEditor работает правильно. Например, я могу нажать кнопку «текстовый центр», и все хорошо. На второй вкладке кнопка «текстовый центр» не работает.

Я думаю, что это не работает, потому что система видит первый экземпляр grapesjs и игнорирует второй. Есть ли правильный способ инициализации нескольких экземпляров grapesjs на одной странице?

Спасибо за любые предложения!

EDIT

Я думал о том, чтобы сделать что-то вроде этого: 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
    const $activeTab = $(event.target); // newly activated tab
    const previousTab = event.relatedTarget; // previous active tab

            if ($activeTab[0].hash === '#tab-2') {
                console.log('product tab is active');
            }

            if ($activeTab[0].hash === '#tab-3') {
                console.log('newsletter tab is active');
            }
        });

Таким образом, я мог проверить, какая вкладка была открыта, а затем уничтожить или инициализировать ту, которая была активна в данный момент.

...