把页面构建器 直接嵌入 你的 SaaS

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// Mount the editor on any container inside your own app shell.
const editor = grapesjs.init({
  container: '#editor',
  height: '100%',
  fromElement: false,
});

const editor = grapesjs.init({
  container: '#editor',

  // Persist to your API, not to a third-party service.
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
    options: {
      remote: {
        urlStore: '/api/projects/123',
        urlLoad: '/api/projects/123',
        // Your session, your authorization rules.
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

import grapesjs from 'grapesjs';
import blocksBasic from 'grapesjs-blocks-basic';

const editor = grapesjs.init({
  container: '#editor',
  plugins: [blocksBasic],
  pluginsOpts: {
    [blocksBasic]: { flexGrid: true },
  },
});

// Or register your own product's components as blocks.
editor.Blocks.add('pricing-table', {
  label: 'Pricing table',
  category: 'Your product',
  content: '<section class="pricing">…</section>',
});

// Publishing stays in your infrastructure.
async function publish(projectId) {
  const html = editor.getHtml();
  const css = editor.getCss();

  await fetch(`/api/projects/${projectId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html, css, status: 'published' }),
  });
}