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的第一个实例，而忽略了第二个实例。有没有适当的方法可以在同一页面上初始化多个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

我正在寻找类似的东西，但还没有完全解决。我做了一些研究，发现此链接与GitHub存储库有关：Can i create multiple pages

这建议您应将每个“页面”的配置存储在内存中（组件和样式），然后在切换页面（或您的情况下的选项卡）时，可以让单个GrapesJS实例知道更改组件/样式。

提供了以下代码段：

{
  current: 1,
  pages: [
    { components: [], style: [] },
    { components: [], style: [] },
    ...
  ]
}

更改页面时，首先存储当前模板：

const currentPage = pages[currentIndex];
currentPage.components = editor.getComponents();
currentPage.style = editor.getStyle();

然后用下一个替换编辑器

const nextPage = pages[nextIndex];
editor.setComponents(nextPage.components);
editor.setStyle(nextPage.style);

我觉得这可能适用于我想要的内容（多页），但是不确定是否可以通过编辑器实例更改更多配置。这个问题有几个月的历史了，您是否能够解决问题？

Answer 2

只需将它们传入 plugins

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

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

2 个答案: