grapesjs-studio-sdk

GrapesJS Studio SDK

GrapesJS Studio SDK 是一款完全可自定义的可视化构建器，可嵌入到你的应用中，用于创建：

• 网站和落地页
• 新闻简报和电子邮件内容
• 文档编辑器

使用此技能进行设置、配置、插件集成和项目类型实现。

安装

npm i @grapesjs/studio-sdk

初始加载编辑器

React：

import StudioEditor from "@grapesjs/studio-sdk/react";
import "@grapesjs/studio-sdk/style";
// ...
<StudioEditor
  options={{
    licenseKey: "LOCAL_LICENSE_KEY",
    project: {
      type: "web", // 'email' | 'document'
    },
  }}
/>;

JavaScript（其他框架或原生 JavaScript）：

import createStudioEditor from "@grapesjs/studio-sdk";
import "@grapesjs/studio-sdk/style";
// ...
createStudioEditor({
  licenseKey: "LOCAL_LICENSE_KEY",
  project: {
    type: "web", // 'email' | 'document'
  },
});

许可证密钥行为

• 在 localhost 上，任意字符串都可用于本地开发。
• 在非 localhost 域名上，必须提供有效的 licenseKey。更多信息：rules/overview/licenses.md

项目类型

• rules/project-types/email.md - 使用电子邮件模式编写 MJML 新闻简报并进行面向电子邮件的编辑。
• rules/project-types/web.md - 使用 Web 模式创建具有多页面内容结构的网站和落地页。
• rules/project-types/document.md - 使用文档模式创建具有文档默认设置的类印刷版式。

完成初始设置并选择项目类型后，接下来配置持久化：

要使编辑器完全可用，下一项重要工作是配置持久化：定义项目的加载和保存方式，以及上传资源的存储和检索方式。

配置

• rules/configuration/overview.md - 浏览所有主要配置领域，了解它们在集成中的协作方式。
• rules/configuration/projects.md - 设置项目初始化、项目数据存储、加载、保存和导出行为。
• rules/configuration/blocks.md - 定义可复用的区块库和类别，供最终用户拖放到画布中。
• rules/configuration/components/overview.md - 了解组件类型注册、解析规则和自定义组件架构。
• rules/configuration/components/properties.md - 查阅完整的组件属性模型，了解其如何控制结构、行为、样式和导出。
• rules/configuration/components/methods.md - 使用组件模型/视图 API，以编程方式检查、修改和扩展组件。
• rules/configuration/assets/overview.md - 配置资源管理器中的资源上传、存储和浏览行为。
• rules/configuration/assets/asset-providers.md - 连接外部资源服务，并为自定义媒体源定义提供方集成。
• rules/configuration/fonts.md - 配置可用字体、自定义来源和提供方集成，以控制排版。
• rules/configuration/global-styles.md - 定义用户可编辑且能统一应用于项目内容的共享样式控件。
• rules/configuration/layout/overview.md - 控制面板位置和整体编辑器 UI 布局结构。
• rules/configuration/layout/components.md - 使用布局组件及其属性选项构建编辑器 UI。
• rules/configuration/pages.md - 管理多页面项目：创建页面、切换上下文并处理页面级编辑。
• rules/configuration/templates.md - 配置模板目录和新项目的模板选择流程。
• rules/configuration/themes.md - 自定义 UI 主题令牌、图标和编辑器界面的视觉样式。
• rules/configuration/datasources/overview.md - 使用记录、变量、条件和可重复输出模式，将结构化数据绑定到内容。
• rules/configuration/datasources/template-engines.md - 集成模板引擎，并映射数据绑定语法，用于渲染和导入/导出工作流。

插件

• rules/plugins/ai/overview.md - 了解 AI 插件的整体架构，以及 UI 与后端各自的职责。
• rules/plugins/ai/ai-backend.md - 实现后端 AI 处理逻辑，包括请求流程和流式响应。
• rules/plugins/ai/ai-chat.md - 在编辑器体验中添加并配置 AI 聊天 UI 行为。
• rules/plugins/asset-providers/google-fonts.md - 将 Google Fonts 添加为资源提供方，以便发现和插入字体。
• rules/plugins/asset-providers/youtube-asset-provider.md - 将 YouTube 添加为资源来源，以便选择和嵌入视频媒体。
• rules/plugins/canvas/absolute-mode.md - 启用自由形式的绝对定位，以便通过坐标编辑布局。
• rules/plugins/canvas/emptyState.md - 自定义画布组件中的空状态占位内容和引导提示。
• rules/plugins/canvas/full-size.md - 启用全尺寸画布模式，以便编辑超出视口限制的大型布局。
• rules/plugins/canvas/grid-mode.md - 在画布中直接启用 CSS Grid 的可视化编辑控件。
• rules/plugins/components/accordion.md - 提供可配置分区和交互行为的手风琴组件。
• rules/plugins/components/animation.md - 为内容过渡和效果添加可配置的动画行为。
• rules/plugins/components/dialog.md - 提供可配置内容和交互选项的对话框／模态框组件。
• rules/plugins/components/flex.md - 添加基于 Flex 的布局块，加快响应式行／列布局的组合。
• rules/plugins/components/fslightbox.md - 添加由 FsLightbox 驱动的媒体查看交互。
• rules/plugins/components/iconify.md - 集成 Iconify 图标集，通过选择器插入图标。
• rules/plugins/components/lightGallery.md - 添加由 LightGallery 驱动的图库和媒体浏览组件。
• rules/plugins/components/listPages.md - 根据项目页面模型动态生成导航页面列表。
• rules/plugins/components/swiper.md - 添加基于 Swiper 的轮播／滑块组件，并支持配置行为。
• rules/plugins/components/table.md - 添加具有更丰富编辑控件的增强型表格组件。
• rules/plugins/custom-renderer/react.md - 自定义画布渲染器，使用你自己的 React 组件构建和渲染项目。
• rules/plugins/data-sources/ejs.md - 使用 EJS 作为模板引擎，进行数据源驱动的渲染和导出。
• rules/plugins/data-sources/handlebars.md - 使用 Handlebars 作为模板引擎，进行数据源驱动的渲染和导出。
• rules/plugins/layout/sidebar-buttons.md - 添加侧边栏操作布局，以便快速访问常用编辑器面板。
• rules/plugins/preset/printable.md - 应用面向打印的默认设置和组件，用于以文档为主的布局。
• rules/plugins/rte/prosemirror.md - 将默认富文本编辑器替换为 ProseMirror 集成。
• rules/plugins/rte/tinymce.md - 将默认富文本编辑器替换为 TinyMCE 集成。