同一页面上可以有多个grapesjs实例吗？答案

【问题标题】：Is it posible to have multiple grapesjs instances on the same page?同一页面上可以有多个grapesjs实例吗？
【发布时间】：2019-09-27 22:09:58
【问题描述】：

我正在使用 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 的第一个实例而忽略了第二个实例。有没有合适的方法在同一页面上初始化多个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');
            }
        });

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

【问题讨论】：

标签： grapesjs

【解决方案1】：

只需将它们传递给plugins

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

【讨论】：