# @formcrafts/embed 中文文档

规范地址：https://npmcn.com/package/%40formcrafts/embed/

版本：1\.0\.40
npm 元数据更新时间：2026-09-21T11:28:34.856Z
中文译文更新时间：2026-11-15T08:35:14.855Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40formcrafts/embed
原文对照：https://npmcn.com/package/%40formcrafts/embed/?lang=original
项目主页：https://github.com/formcrafts/embed#readme
源码仓库：https://github.com/formcrafts/embed

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：289 kB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2024-01-31T16:29:01.221Z
- 最新版本发布：2026-09-21T11:28:34.600Z
- 近 30 天下载量：9809（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：48（近 12 个月 2 个）

## 中文简介

嵌入表格的库

## 安装

```sh
npm install @formcrafts/embed
```

也可以使用：`pnpm add @formcrafts/embed`、`yarn add @formcrafts/embed`、`bun add @formcrafts/embed`

## README

## 导言

你可以使用Formcrafts的嵌入库 `@formcrafts/embed` 以 Vanilla JavaScript 为格式嵌入。 库可作为一个npm软件包提供,与Svelte,React,Vue,Angular等框架合作良好.

## 安装

要将 Formcraps JavaScript 库添加到您的项目中, 请使用 npm 安装 :

```shellscript
npm install @formcrafts/embed --save
```

## 导入库

要在代码中提供库,请导入必要的模块:

```javascript
import { createInlineForm, createPopup } from "@formcrafts/embed"
```

## 嵌入 - 内置

### 初始化表单

```javascript
const myInlineForm = createInlineForm({
  form: "form_key", // Your form key
  target: document.getElementById("element_id"), // Target element
  seamless: true, // Removes form border, shadow, and padding
  width: 500, // Max width of the form
  redirectWithin: true, // Keep redirect within form frame
  values: {
    field1: "Jack Smith",
    field2: ["Chocolate", "Vanilla"],
  }, // Prefill values
})
```

### 可用方法

您可以使用下列方法与内线形式进行交互:

```javascript
myInlineForm.on("load", (height: number) => {}) // Fires when the form loads
myInlineForm.on("submit:success", () => {}) // Fires on a successful form submit
myInlineForm.destroy() // Remove the form instance
myInlineForm.values({
  field1: "New value",
}) // Update the values of the form
```

## 嵌入 - 弹出

### 初始化表单

```javascript
const myPopupForm = createPopup({
  form: "form_key", // Your form key
  width: 500, // Max width of the form
  redirectWithin: true, // Keep redirect within form frame
  values: {
    field1: "Jack Smith",
    field2: ["Chocolate", "Vanilla"],
  }, // Prefill values
})
```

### 可用方法

您可以使用下列方法与弹出表进行交互:

```javascript
myPopupForm.on("load", (height: number) => {}) // Fires when the form loads
myPopupForm.on("submit:success", () => {}) // Fires on a successful form submit
myPopupForm.load() // Load the form. Can be used to load the form before showing it. Optional.
myPopupForm.open() // Open the popup
myPopupForm.close() // Close the popup
myPopupForm.destroy() // Destroy the popup and the form instance
myPopupForm.values({
  field1: "New value",
}) // Update the values of the form
```

## 常见问题

### @formcrafts/embed 是什么？

嵌入表格的库

### 如何安装 @formcrafts/embed？

在项目目录运行 npm install @formcrafts/embed，或使用 pnpm add / yarn add / bun add。

### @formcrafts/embed 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @formcrafts/embed 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @formcrafts/embed 可以商用吗？

@formcrafts/embed 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @formcrafts/embed 的下载量有多少？

根据 npm 官方下载统计，@formcrafts/embed 在 2026/10/16 – 2026/11/14 这 30 天内被下载 9,809 次，日均约 327 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @formcrafts/embed 还在维护吗？

最新版本 1\.0\.40 发布于 2026/09/21（1 个月前）；至今共发布 48 个版本，其中过去 12 个月发布了 2 个；首次发布于 2024/02/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。