Vue 页面构建器与 GrapesJS

应用了没有主题的库存编辑器。这是你配置之前得到的——下面每个构建者都是从起点自定义的。

生产页面构建器远不止是几个Vue组件。它是一个画布、一个拖拽系统、一个组件模型、一个样式引擎、响应式编辑、撤销历史、资产管理、存储和导出。这里是整个表面，以及每个部分最终归谁所有。

• GrapesJS 核心

  编辑画布

  用户可以直接编辑独立文档，拥有自己的样式和滚动功能。

• GrapesJS 核心

  拖拽

  投放目标、插入点、重新排序和嵌套规则。

• GrapesJS 核心

  组件模型

  类型化元素，拥有各自的设置、约束和行为。

• GrapesJS 核心

  选择与工具栏

  点击选择、悬停轮廓、按元素工具栏和徽章。

• GrapesJS 核心

  Style Manager

  字体、颜色、间距和布局控制都绑定在选择器上。

• GrapesJS 核心

  响应式剪辑

  设备宽度和断点范围样式在同一画布中。

• GrapesJS 核心

  Layer Manager

  页面的树状结构保持可导航性。

• GrapesJS 核心

  撤销与重做

  每次编辑都有命令历史，而不仅仅是文本。

• GrapesJS 核心

  HTML 与 CSS 导出

  从当前文档生成的干净标记和样式表。

• 插件

  区块库

  用户拖入的现成部分。你的，或者安装好的。

• 插件

  模板

  整个起始布局，这样没人会遇到空白画布。

• 插件

  资产管理

  上传、媒体库和图像处理。

• 插件

  富文本编辑

  内置编辑器之外的内联文本格式。

• 插件

  多页项目

  一个项目里有超过一页。

• 你的Vue应用

  存储

  项目数据被写入和读取的地方。你的API，你的数据库。

• 你的Vue应用

  认证与角色

  谁可以开启、编辑并发布哪个项目。

• 你的Vue应用

  多租户

  将一个客户的页面、资源和模板与另一个客户的分离。

• 你的Vue应用

  发布与托管

  将批准的输出变成你基础设施上的实时页面。

• 你的Vue应用

  计划与账单

  每个客户应享有的权利以及他们为此支付的费用。

中间栏是GJS.Market的意义所在：它是实际功能，你安装的，而不是调度。右侧的列永远不会成为别人的问题——那是你的产品，本页在每个涉及它的部分都明确说明了这一点。

GrapesJS 不是你的应用替代品，也不是托管服务。它是一个编辑引擎，安装在一条路由的一个元素中。图中其上下的所有部分都归你所有。

1. 01

   你的Vue / Nuxt申请

   所有让产品属于你的元素。GrapesJS对此毫无意见。

   • 认证
   • 用户
   • 布线
   • 账单
   • 业务逻辑
   • APIs
   ↓
2. 02

   GrapesJS 编辑器

   一个挂载实例，在一个组件内，在同一条路由上。这就是你没有构建的那层。

   • 画布
   • 方块
   • 组成部分
   • 风格
   • 层次
   • 资产
   ↓
3. 03

   你的后台

   编辑会给你两个文物和一个媒体流。接下来发生的事由你的API决定。

   • JSON 计划
   • HTML + CSS
   • 媒体
   • 角色
   ↓
4. 04

   你的数据库

   你设计的模式中的普通行。这里没有任何必须采用的GrapesJS格式。

   • 项目
   • 版本
   • 租户
   • 页面

从头到下读：你的Vue应用程序认证用户并将其导向到编辑器页面;编辑器生成项目数据;你的API将其写入数据库。编辑器从不与数据库通信，数据库也不必理解编辑器。

不是。这是大多数Vue开发者问的第一个问题，答案会影响页面其余部分的阅读方式。这两层不重叠：一层运行你的应用程序，另一层运行其中的编辑表面。

顺便说一句：画布渲染的是iframe内部的普通DOM，而不是挂载的Vue组件。你的应用是Vue;用户编辑的是HTML和CSS，然后你的应用会随意渲染。

通用网站构建器和属于你产品中的构建器的区别在于组件集。不要强行将你的内容模型纳入别人的元素类型——注册你自己的。

// builder/registerProductBlocks.ts
import type { Editor } from 'grapesjs';

// A plugin is just a function that receives the editor, so everything below
// works identically in Vue, Nuxt, React or a plain HTML page.
export function registerProductBlocks(editor: Editor): void {
  // A custom component type: your own element, with your own settings.
  editor.DomComponents.addType('pricing-table', {
    isComponent: (el) => el.dataset?.gjsType === 'pricing-table',
    model: {
      defaults: {
        droppable: false,
        traits: [
          { name: 'plan', type: 'select', options: ['free', 'pro', 'team'] },
          { name: 'highlight', type: 'checkbox' },
        ],
      },
    },
  });

  // A block: what the user actually drags in from the panel.
  editor.BlockManager.add('pricing-table', {
    label: 'Pricing',
    category: 'Sections',
    content: { type: 'pricing-table' },
  });
}

• 组件类型定义了元素的定义：它接受什么、拒绝什么以及它暴露哪些设置。
• 块是用户在面板中看到的——同一类型可以伴奏多个带有不同预设的块。
• 特质会变成设置侧边栏，这样用户就能配置元素，而不是编辑标记。
• “droppable: false”和匹配约束是防止设计元件被拆解的方法。
• 命令允许你附加自己的操作——发布、复制到另一个租户、请求审查。
• 这些都不是 Vue 特有的：插件是一个接收编辑器的功能，所以它也能在 Nuxt、React 或普通 HTML 中工作。

不要强行把你的产品做成通用的网站建设工具。根据你自己的内容模型和设计系统定制编辑器。

一个不受限制的画布会产生让其所处产品尴尬的页面。编辑器可以双向配置——有用的设置不是最大自由，而是有界自由。

给予用户创作自由，同时不让他们破坏你的产品设计体系。

决定页面构建器是否被使用的最大因素，是第一次访问时块面板里等待的内容。构建你产品真正需要的部分，或者安装库并重新命名。

• Hero

  头条、配角和主要动作。

• 特征网格

  一个不断重复的能力或优势网格。

• 定价

  规划带有特色和行动号召的专栏。

• 推荐

  带出处的引用，排成一排或轮播。

• FAQ

  问答对，可展开或平面。

• 联系方式

  在你自己的终端上发布一个表单板块。

• CTA带

  一个全宽的带，只有一个清晰的动作。

• 页脚

  导航栏、法律链接和品牌标志。

GrapesJS 不托管任何东西，也不选择数据库。你注册存储适配器时有两种方法——加载和存储——并且都与你的 API 通信。没有任何数据离开你的基础设施。

const editor = grapesjs.init({
  container: host.value!,
  storageManager: {
    type: 'app-api',
    autosave: true,
    stepsBeforeSave: 10,
  },
  // Registered as a plugin so the adapter exists before the first load().
  plugins: [
    (ed) => {
      ed.Storage.add('app-api', {
        async load() {
          const res = await fetch(`/api/projects/${props.projectId}`);
          if (!res.ok) throw new Error(`Load failed: ${res.status}`);
          return await res.json();
        },
        async store(project) {
          const res = await fetch(`/api/projects/${props.projectId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(project),
          });
          if (!res.ok) throw new Error(`Save failed: ${res.status}`);
        },
      });
    },
  ],
});

• 将适配器注册为插件，使其在编辑器首次加载前就已存在。
• 'autosave' 搭配 'stepsBeforeSave' 批次时，是写入而不是每次按键触发一次。
• 将项目JSON作为真实信息源存储;编辑器会重新加载它。
• 保持版本为普通行——修订历史是结构决策，不是编辑器功能。
• 授权服务器上的每一次加载和存储。请求中的项目ID是申诉，不是许可。
• 通过监听编辑器的存储事件，在你自己的 Vue UI 中保存 Surface 状态。

你控制你的数据和后端。编辑器就像你应用的其他部分一样，是你 API 的一个客户端。

编辑部会导出两个伪影，它们不能互换。存储错误的伪影就是导致六个月后页面无法编辑的错误。

// The source of truth. Store it; the editor reloads from it.
const projectData = editor.getProjectData();

// The output. Regenerate it every time you publish.
const html = editor.getHtml();
const css = editor.getCss();

await $fetch(`/api/projects/${projectId}/publish`, {
  method: 'POST',
  body: { projectData, html, css },
});

// Authorize the request and sanitize `html` on the server —
// never in the component that produced it.

存储项目数据以便编辑。需要发布输出时生成HTML和CSS。

创作和发布是不同的工作。GrapesJS 在用户满意页面时完成;之后的流程就是你的工作流程，在你的基础设施上。

每个客户都有自己的页面、资源、模板和品牌。这种隔离性是你数据模型和API的特性——编辑者只是被分配到合适的项目。

GJS.Market的真实列表，按他们移除的问题分组。所有列表都安装到你Vue组件创建的同一个编辑器实例中。

块与模板

问题是：第一次运行时块面板是空的。他们增加了现成的部分、模板管理和多页项目。需要它们的人：任何用户不是开发者的人。

浏览此类别

Plugin Basic Blocks

这是一个起始块，所以在你写自己的板块之前，这个面板很有用。

免费查看插件

Plugin Blocky for Tailwind CSS

基于Tailwind的部分，适用于设计系统已是Tailwind的产品。

¥424.80查看插件

Templates Manager

保存、列出并应用整个布局作为可重复使用的起点。

¥280.80查看插件

Pages Manager

一个项目里有多个页面，中间有导航。

¥180.00查看插件

存储与恢复

问题是：工作丢失和手工持久化。他们增加了：项目管理、autosave、崩溃恢复和替代存储后台。谁需要它们：每个有真实客户的产品都存在编辑器。

浏览此类别

Grapesjs Project Manager

项目列表、创建和切换，而不是每个路由一个编辑器。

免费查看插件

Autosave & Restore — Crash Recovery for GrapesJS

在崩溃或关闭标签页后恢复未保存的工作——用户永远不会原谅失败。

¥86.40查看插件

IndexedDB Storage

浏览器中的本地持久化，对草稿和离线编辑非常有用。

免费查看插件

Directus Storage

通过Directus后端读写项目，而不是自定义的API。

免费查看插件

资产与出口

问题是：图片处理和从编辑器中输出。他们添加的内容：上传小部件、CDN集成、图片编辑和归档导出。谁需要这些：用户自带媒体的构建者。

浏览此类别

Grapesjs Cloudinary

通过Cloudinary上传并提供编辑媒体。

免费查看插件

Grapesjs Uppy

完整的上传体验——拖入、进度、多源。

免费查看插件

TOAST UI Image Editor

在编辑器内裁剪、调整大小和调整图像，而不是在编辑器之前。

免费查看插件

Export Zip

下载当前项目，作为HTML/CSS档案。

免费查看插件

编辑与排版

问题是：编辑界面比用户预期的要薄。他们添加的内容：更丰富的文本编辑、表单、断点控制和按组件代码。谁需要这些：团队替换现有编辑器。

浏览此类别

Grapesjs RTE Extensions

将内联文本编辑扩展到内置工具栏之外。

免费查看插件

Plugin Forms

为收集输入的构建者准备带有类型字段的组件。

免费查看插件

Responsive Pack — Breakpoint Manager for GrapesJS

管理断点和设备宽度，超出三个默认值。

¥100.80查看插件

Grapesjs Component Code Editor

为需要的用户提供按组件进行 HTML/CSS 编辑。

免费查看插件

同一个目录，只是根据你正在构建的产品来切割。安装与你情况相匹配的协议栈，忽略其他的——一个加载所有插件的编辑器更慢更难用，而不是更好。

所示价格为当前 GJS.Market 挂牌价格;免费插件已标注。

如果上面的堆栈与你的产品不匹配，可以从这里开始。这些是目录部分，大致按照构建者进入它们的顺序排列。

• 方块现成的模块面板。
• 组成部分新的元素类型和各自的设定。
• 预设完整的编辑器配置，主题明确且随时可用。
• 存储用于持久化项目数据的适配器。
• 资产上传、媒体库和图像工具。
• 风格Style Manager的额外控制。
• 富文本在默认工具栏之外进行内联文本编辑。
• 网页页面层面功能和完整页面套件。
• 通讯邮件输出、MJML和活动模块。
• 开发者工具调试、检查和构建时间助手。
• 人工智能编辑器内部的生成与协助。

这两列都不是免费的。问题只是你的队伍应该花时间在哪一栏。

本表中故意不显示任何成本或时间数据——我们不了解你的团队，任何数字都是虚构的。

逐行说明你自己写的内容和已经存在的内容。“可扩展”意味着引擎提供钩子，你提供行为——通常是几行，有时是插件。

包含 = 随核心一同出厂。可扩展 = 文档化的扩展点，以及存在插件。
已在2026-09-02上验证过GrapesJS、0.23.6。

五步，一个组成部分。 没有官方的 Vue 封装器，你也不需要：GrapesJS 渲染成一个普通元素，所以唯一针对 Vue 的问题是哪个生命周期钩子调用了“init()”。安装 grapesjs 0.23.6，创建组件，挂载时初始化，传递插件，卸载时销毁。

1. 01安装GrapesJS
2. 02创建编辑器组件
3. 03挂载时初始化
4. 04配置插件
5. 05下车时摧毁

<!-- components/PageBuilder.vue -->
<template>
  <div ref="host" class="page-builder" />
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
import grapesjs, { type Editor } from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// shallowRef, not ref: the editor is a large non-reactive instance and
// deep-proxying it costs performance for nothing.
const editor = shallowRef<Editor | null>(null);
const host = ref<HTMLElement | null>(null);

onMounted(() => {
  editor.value = grapesjs.init({
    container: host.value!,
    height: '100%',
    fromElement: false,
    storageManager: false,
    plugins: [],          // GJS.Market plugins go here
    blockManager: { blocks: [] },
  });
});

onBeforeUnmount(() => {
  editor.value?.destroy();
  editor.value = null;
});
</script>

• “shallowRef”，不是“ref”：编辑器是一个大型且无反应的对象，深度代理会免费消耗性能。
• “onMounted”从不在服务器上运行，这也是为什么在Nuxt中它安全，无需额外设备。
• “destroy()”在卸载事宜上——一种路线变更，导致编辑挂载泄露听众和iframe。
• 布线时显示“storageManager： false”，等API准备好再换适配器。
• 导入一次编辑器样式表;它负责面板样式，不是你的应用程序。
• 之后的所有内容——事件、包装器、可组合表单——都在集成指南中。

GrapesJS 需要一个浏览器 DOM。在 Nuxt 的服务器渲染下没有“文档”，所以编辑器必须在客户端创建——而 “onMounted” 已经保证了这一点。“<ClientOnly>” 是腰带和支架版本，也是备用标记所在。

<!-- pages/editor.vue -->
<template>
  <ClientOnly>
    <PageBuilder :project-id="route.params.id" />

    <template #fallback>
      <p class="editor-placeholder">Loading the editor…</p>
    </template>
  </ClientOnly>
</template>

<script setup lang="ts">
const route = useRoute();
</script>

• 如果你想要服务器渲染的备援代替编辑器，可以使用“<ClientOnly>”。
• '.client.vue' 后缀是 Nuxt 用来表达整个组件同样内容的方式。
• SSR并不是本页最有趣的部分——它是一个边界，而且是两行的。
• 编辑器路由之外的所有内容在服务器上渲染和现在完全一样。

这些问题一开始就便宜，客户进入编辑器后修复成本较高。

• ✕错误

  SSR 期间初始化

  在服务器上运行的任何地方调用“init()”都会被抛弃，因为没有“文档”可以渲染画布。

  ✓该怎么办

  编辑器只用“onMounted”创建，如果想要服务器渲染的备用，就用“<ClientOnly>”包裹路由。

• ✕错误

  只保存HTML

  渲染出来的输出无法被转换回可编辑文档。以这种方式保存的每一页在发布时都会被冻结。

  ✓该怎么办

  将项目JSON作为真实数据源存储，发布时重新生成HTML和CSS。

• ✕错误

  为用户提供无限的空白画布

  完全自由会产生破坏设计系统的页面，而首次运行时面板中没有任何内容，则根本不会产生页面。

  ✓该怎么办

  发布精心策划的块和模板，并限制用户可访问的样式属性。

• ✕错误

  安装所有插件

  每个插件都会添加面板、捆绑权重和用户必须理解的表面。拥挤的编辑器更难用，但功能不强。

  ✓该怎么办

  先从产品形状的堆栈开始，真正需要时再添加插件。

这些因素区分了一个可用的演示和可以展示给付费客户的演示。

不同的产品，一种架构。如果你认出了你的团队，接下来的页面内容就是为你写的。

应用用Vue，视觉编辑用GrapesJS。添加你自己的组件、模块、模板、存储和发布流程——需要时再用GJS.Market插件扩展构建器。