打造你自己的开源页面构建器

1. 01 — 安装

   在你的应用中添加GrapesJS。

   一个依赖。没有构建插件，也不需要框架要求。

   npm install grapesjs

2. 02 — 初始化

   安装编辑器

   把它指向一个容器，然后选择你的设备断点。这是一个可用的编辑器。

   安装编辑器js

   import grapesjs from 'grapesjs';
   import 'grapesjs/dist/css/grapes.min.css';
   
   const editor = grapesjs.init({
     container: '#gjs',
     height: '100vh',
     width: 'auto',
     // Reads the markup already inside #gjs as the starting page.
     fromElement: true,
     // No storage yet — step 04 connects your backend.
     storageManager: false,
     deviceManager: {
       devices: [
         { id: 'desktop', name: 'Desktop', width: '' },
         { id: 'tablet', name: 'Tablet', width: '768px', widthMedia: '992px' },
         { id: 'mobile', name: 'Mobile', width: '320px', widthMedia: '480px' },
       ],
     },
   });

3. 03 — 延伸

   添加块、组件和插件

   组件类型定义用户可以编辑的内容;块则使它可拖曳。它们是两个注册，而不是一个。

   添加块、组件和插件js

   // A component type owns its markup and the traits your users can edit.
   editor.Components.addType('cta', {
     model: {
       defaults: {
         tagName: 'a',
         attributes: { class: 'cta', href: '#' },
         components: 'Get started',
         traits: [
           { name: 'href', type: 'text', label: 'Link' },
           { name: 'title', type: 'text', label: 'Title' },
         ],
       },
     },
   });
   
   // A block is what makes that type draggable from the panel — a separate,
   // explicit registration, not something the type gives you for free.
   editor.Blocks.add('cta-block', {
     label: 'CTA',
     category: 'Basic',
     content: { type: 'cta' },
   });

4. 04 — 连接

   连接存储、用户与发布

   存储适配器是编辑器的停顿点，也是你的产品开始的地方。

   连接存储、用户与发布js

   // Your backend, your schema, your auth. GrapesJS calls load() and store();
   // everything inside them is yours.
   editor.Storage.add('your-backend', {
     async load() {
       const res = await fetch(`/api/pages/${pageId}`, { credentials: 'include' });
       return res.ok ? res.json() : {};
     },
     async store(data) {
       await fetch(`/api/pages/${pageId}`, {
         method: 'PUT',
         credentials: 'include',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(data),
       });
       return data;
     },
   });
   
   // Publishing is your workflow, not the editor's. getHtml()/getCss() give you
   // the output; what happens to it is a decision only your product can make.
   editor.Commands.add('publish-page', {
     run: (ed) => ({ html: ed.getHtml(), css: ed.getCss() }),
   });

已在2026-09-03上与grapesjs0.23.6进行验证。

这就是整个表面：安装、挂载、扩展、连接。第四步之后的所有内容——认证、计费、版本、域名——都是你的应用，编辑器没有任何决定。