5

我正在使用 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');
            }
        });

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

4

1 回答 1

0

把它们传进去plugins

grapesjs.init({
  ...
  plugins: ['plugin1', 'plugin2', ...],
  // options
  pluginsOpts: {
    'plugin1': {...},
    'plugin2': {...},
    ...
  }
});
于 2020-12-19T16:11:40.023 回答