是否可以在同一页面上有多个 Grapesjs 实例？

Question

我正在使用 Boostrap 4 标签。在每个选项卡上，我都有一个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实例？

感谢您的任何建议！

编辑

我想过做这样的事情：

$('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');
            }
        });

这样我就可以检查哪个选项卡是打开的，然后销毁或初始化当前处于活动状态的选项卡。

Answer 1

只需将它们传递进去即可plugins

grapesjs.init({
  ...
  plugins: ['plugin1', 'plugin2', ...],
  // options
  pluginsOpts: {
    'plugin1': {...},
    'plugin2': {...},
    ...
  }
});