# @camunda/form-playground 中文文档
规范地址：https://npmcn.com/package/%40camunda/form-playground/
版本：0\.28\.0
npm 元数据更新时间：2026-10-19T17:50:31.423Z
中文译文更新时间：2026-11-09T00:48:19.245Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40camunda/form-playground
原文对照：https://npmcn.com/package/%40camunda/form-playground/?lang=original
项目主页：https://github.com/camunda/form-playground#readme
源码仓库：https://github.com/camunda/form-playground
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：477 kB，19 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：5 个
- peer 依赖：@bpmn-io/form-js ^2\.0\.0
- 首次发布：2022-09-30T07:43:45.168Z
- 最新版本发布：2026-10-19T17:50:30.992Z
- 近 30 天下载量：17526（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：54（近 12 个月 5 个）
## 中文简介
卡蒙达格式游戏场.
## 安装
```sh
npm install @camunda/form-playground
```
也可以使用：`pnpm add @camunda/form-playground`、`yarn add @camunda/form-playground`、`bun add @camunda/form-playground`
## README
# @ camunda/ 形式游戏场
[](https://github.com/camunda/form-playground/actions/workflows/CI.yml)
卡蒙达格式游戏场.
## 使用量
将游乐场融入您的应用程序 :
```javascript
import { createCamundaFormPlayground } from 'camunda/form-playground';
const formPlayground = await createCamundaFormPlayground({
container: document.querySelector('#container'),
data,
schema
});
// open preview
formPlayground.open();
// close preview
formPlayground.collapse();
// listen on editor events
const formEditor = formPlayground.getEditor();
formEditor.on('selection.changed', () => { ... });
```
## 样式
适当的样式包括必要的样式表和使用的字体:
```html
```
## API 密码
### `createCamundaFormPlayground => Promise`
创建一个已完全渲染的窗体操场 [有选项](https://npmcn.com/package/%40camunda/form-playground/#readme-options)。 。 。 .
```javascript
import { createFormPlayground } from '@camunda/form-playground';
const formPlayground = await createFormPlayground({
container: document.querySelector('#form-playground'),
data,
schema
});
```
### `CamundaFormPlayground`
创建新窗体操场 [有选项](https://npmcn.com/package/%40camunda/form-playground/#readme-options)。 。 。 .
```javascript
import { CamundaFormPlayground } from '@camunda/form-playground';
const formPlayground = new CamundaFormPlayground({
container: document.querySelector('#form-playground'),
data,
schema
});
```
### 选项
有几个选项可以传递给 `createFormPlayground` 或者说 `CamundaFormPlayground`数字 :
```javascript
{
container: HTMLElement, // optional - the container to render the form playground into
data: {}, // required - set the initial form data
schema: {}, // required - set the initial form schema
exporter: { name: '', version: '' }, // optional - set the schema exporter name and version
layout: {}, // optional - set the initial form layout
editorAdditionalModules: [], // optional - add additional modules to the form editor
viewerAdditionalModules: [], // optional - add additional modules to the form preview
editorProperties: {}, // optional - set the initial form editor properties
viewerProperties: {}, // optional - set the initial form preview properties
}
```
例如,你可以使用 `viewerProperties` 在新标签中覆盖打开外部链接的默认行为 :
```javascript
viewerProperties: {
textLinkTarget: '_blank'
}
```
### `CamundaFormPlayground#open(containers?: string[]) => void`
打开所有或特定的游乐场容器.
```javascript
// open all
formPlayground.open();
// open specific
formPlayground.open([ 'form-preview' ]);
```
### `CamundaFormPlayground#collapse(containers?: string[]) => void`
折叠所有或特定游乐场容器.
```javascript
// collapse all
formPlayground.collapse();
// collapse specific
formPlayground.collapse([ 'form-preview' ]);
```
### `CamundaFormPlayground#get(type: String, strict: Boolean) => any`
从嵌入式格式编辑器获取服务 .
```javascript
const eventBus = formPlayground.get('eventBus');
```
### `CamundaFormPlayground#getDataEditor() => JSONEditor`
获取嵌入式输入数据编辑器 .
```javascript
const dataEditor = formPlayground.getDataEditor();
const data = dataEditor.getValue();
```
### `CamundaFormPlayground#getEditor() => FormEditor`
获取嵌入式格式编辑器 .
```javascript
const editor = formPlayground.getEditor();
editor.on('selection.changed', () => { ... });
```
### `CamundaFormPlayground#getForm() => Form`
获取嵌入式预览表 .
```javascript
const form = formPlayground.getForm();
form.on('submit', event => {
console.log('Form ', event);
});
```
### `CamundaFormPlayground#getResultView() => JSONEditor`
获取嵌入式输出数据视图 .
```javascript
const resultView = formPlayground.getResultView();
const data = resultView.getValue();
```
### `CamundaFormPlayground#getSchema() => any`
获取当前表单计划 .
### `CamundaFormPlayground#setSchema(schema: any) => void`
设置表单方案.
### `CamundaFormPlayground#saveSchema() => any`
从嵌入的窗体编辑器导出窗体计划 .
```javascript
const schema = formPlayground.saveSchema(schema);
console.log('exported schema', schema);
```
### `CamundaFormPlayground#attachTo(parent: HTMLElement) => void`
将表单游乐场附加到父节点上.
### `CamundaFormPlayground#detach() => void`
将形式游乐场从母节点分离出.
### `CamundaFormPlayground#fire(event) => void`
开个会.
### `CamundaFormPlayground#on(event, fn) => void`
订阅一个事件.
### `CamundaFormPlayground#off(event, fn) => void`
从一个事件取消订阅 .
### `CamundaFormPlayground#destroy() => void`
从文档中删除窗体操场.
## 黑客项目
要得到开发设置 确保有 [节点JS](https://nodejs.org/en/download/) 已安装. 设置后立即复制项目并执行
```
npm install
npm start
```
## 许可证
麻省理工学院
## 常见问题
### @camunda/form-playground 是什么？
卡蒙达格式游戏场\.
### 如何安装 @camunda/form-playground？
在项目目录运行 npm install @camunda/form-playground，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@bpmn-io/form-js（^2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @camunda/form-playground 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/camunda\_\_form-playground 是否存在。
### @camunda/form-playground 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @camunda/form-playground 可以商用吗？
@camunda/form-playground 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @camunda/form-playground 的下载量有多少？
根据 npm 官方下载统计，@camunda/form-playground 在 2026/10/09 – 2026/11/07 这 30 天内被下载 17,526 次，日均约 584 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @camunda/form-playground 还在维护吗？
最新版本 0\.28\.0 发布于 2026/10/20（20 天前）；至今共发布 54 个版本，其中过去 12 个月发布了 5 个；首次发布于 2022/09/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。