为你的 SaaS 打造可视化页面构建器

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

// The editor core. Mount it anywhere inside your customer dashboard.
const editor = grapesjs.init({
  container: '#editor',
});

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

  // Each customer's page is a row in your database, behind your own auth.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/customers/${customerId}/pages/${pageId}`,
        urlLoad: `/api/customers/${customerId}/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

// Publishing stays on your side — your domains, your CDN, your workflow.
async function publish() {
  await fetch(`/api/customers/${customerId}/pages/${pageId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: editor.getHtml(), css: editor.getCss() }),
  });
}