Headless CMS 可视化编辑器

// 1. Install GrapesJS and storage plugin
npm install grapesjs grapesjs-plugin-storage-rest

// 2. Configure headless CMS storage adapter
const editor = grapesjs.init({
  container: '#editor',
  storageManager: {
    type: 'remote',
    urlStore: 'https://your-cms.io/api/content/{id}',
    urlLoad: 'https://your-cms.io/api/content/{id}',
    fetchOptions: (opts) => ({
      ...opts,
      headers: { Authorization: `Bearer ${token}` },
    }),
  },
});

// 3. Serialize to JSON for headless delivery
const content = editor.getComponents().toJSON();
await fetch('/api/cms/pages', {
  method: 'POST',
  body: JSON.stringify(content),
});