# @advanced-rest-client/body-editor 中文文档

规范地址：https://npmcn.com/package/%40advanced-rest-client/body-editor/

版本：0\.2\.7
npm 元数据更新时间：2026-04-07T19:30:29.860Z
中文译文更新时间：2026-11-06T12:02:42.386Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：170 kB，34 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：15 个
- 首次发布：2020-11-06T04:23:06.363Z
- 最新版本发布：2021-10-20T22:53:33.551Z
- 近 30 天下载量：3295（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 0 个）

## 中文简介

作为网络组件的 HTTP 请求的 HTTP 机构编辑器

## 安装

```sh
npm install @advanced-rest-client/body-editor
```

也可以使用：`pnpm add @advanced-rest-client/body-editor`、`yarn add @advanced-rest-client/body-editor`、`bun add @advanced-rest-client/body-editor`

## README

# 折旧

这一构成部分已贬值。 使用 `@advanced-rest-client/app` 换句话说.

* * *

一个模块,包含UI区域以及渲染出HTTP正文编辑器的逻辑.

该套件包含:

-   人体编辑器 - 用专门的编辑器来编辑不同类型数据的元素
-   活体编辑 - 摩纳哥编辑部活体编辑.
-   身体-多部分编辑器 用于多部分形式数据生成的元素
-   机构形式数据编辑器 - 基于窗体的输入 `www-url-form-encoded` 类型

[![Published on NPM](https://img.shields.io/npm/v/@advanced-rest-client/body-editor.svg)](https://www.npmjs.com/package/@advanced-rest-client/body-editor)

[![tests](https://github.com/advanced-rest-client/body-editor/actions/workflows/deployment.yml/badge.svg)](https://github.com/advanced-rest-client/body-editor/actions/workflows/deployment.yml)

## 使用量

### 安装

```sh
npm install --save @advanced-rest-client/body-editor
```

## 机身编辑器

编辑器可以产生值 `string`, (中文(简体) ), `File`,或 `FormData`中还生成 `model` ,在恢复先前状态时,应当被放回编辑器上(而不是值). 编辑器可以从每个支持的数据类型中生成视图模型,但同时设定 `value` 编辑 `model` 将重复工作,最后一组值将获胜.

视图模型保持每个编辑器的配置(raw/FormData/URL编码). 编辑器的值是当前已提供编辑器的值. 当用户切换编辑器时,会生成一个新的值.

另外,见原始编辑器的注释,以查看要求清单.

### 示例

```js
import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/body-editor/body-editor.js';

class SampleElement extends LitElement {
  render() {
    const {body, model} = this;
    const setValue = Array.isArray(model) && model.length ? undefined : body;
    return html`
    <body-editor
      .value="${setValue}"
      .model="${model}"
      @change="${this.valueAndModelHandler}"
      autoEncode
      contentType="application/json"
      selected="raw"
      editorType="Monaco"
    ></body-editor>
    `;
  }
}
customElements.define('sample-element', SampleElement);
```

这个 `autoEncode` 属性允许在 `www-url-form-encoded` 编辑器和自动处理值处理。 这个 `contentType` 属性被传递到原始编辑器 以检测要使用的语言。 这个 `editorType` 允许在摩纳哥和CodeMirror编辑器之间切换,以便与珍贵元素相容.

## 外部依赖关系

摩纳哥和CodeMirror编辑器都具有外部依赖性,必须从要素的外侧纳入。 您可以检查演示文件夹, 查看如何在演示环境中处理 .

### 摩纳哥属地

在运行组件前将摩纳哥纳入应用程序。 目前该组件不能直接包含,因为摩纳哥执行CSS文件中的导入.

摩纳哥使用网络工人来工作. 这些工人必须进入申请的最后阶段。 设置全局 `MonacoEnvironment` 以指导摩纳哥编辑如何找到工人。 另外,请查看摩纳哥的文献,了解更多WebPack的构建过程和插件.

```javascript
window.MonacoEnvironment = {
  getWorker: (moduleId, label) => {
    let url;
    const prefix = '../node_modules/monaco-editor/esm/vs/';
    const langPrefix = `${prefix}language/`;
    switch (label) {
      case 'json': url = `${langPrefix}json/json.worker.js`; break;
      case 'css': url = `${langPrefix}css/css.worker.js`; break;
      case 'html': url = `${langPrefix}html/html.worker.js`; break;
      case 'javascript':
      case 'typescript': url = `${langPrefix}typescript/ts.worker.js`; break;
      default: url = `${prefix}editor/editor.worker.js`; break;
    }
    return new Worker(url, {
      type: 'module', // <- this uses workers from the `esm` build so the web worker must handle modules properly.
    });
  }
}
```

### 代码

CodeMiror不与ES模块合作. 图书馆期望全球 `CodeMirror` 对象将设置在全局对象上. 这是要装入页面的文件列表 **在此之前** 身体编辑器初始化 :

-   `codemirror/lib/codemirror.js`
-   `jsonlint/lib/jsonlint.js`
-   `codemirror/addon/mode/loadmode.js`
-   `codemirror/mode/meta.js`
-   `codemirror/mode/javascript/javascript.js`
-   `codemirror/mode/xml/xml.js`
-   `codemirror/mode/htmlmixed/htmlmixed.js`
-   `codemirror/addon/lint/lint.js`
-   `codemirror/addon/lint/json-lint.js`
-   `codemirror/addon/lint/lint.css` - 这是cs!

此外,电解器要求将该模块作为ES模块加载: `@advanced-rest-client/code-mirror-linter/code-mirror-linter.js`。 。 。 .

最后设定 `CodeMirror.modeURL` 属性指向代码镜像模式位置.

```javascript
CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js';
```

## 发展

```sh
git clone https://github.com/advanced-rest-client/body-editor
cd body-editor
npm install
```

### 本地运行演示

```sh
npm start
```

### 运行测试

```sh
npm test
```

## 常见问题

### @advanced-rest-client/body-editor 是什么？

作为网络组件的 HTTP 请求的 HTTP 机构编辑器

### 如何安装 @advanced-rest-client/body-editor？

在项目目录运行 npm install @advanced-rest-client/body-editor，或使用 pnpm add / yarn add / bun add。

### @advanced-rest-client/body-editor 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/advanced-rest-client\_\_body-editor 是否存在。

### @advanced-rest-client/body-editor 支持 ESM 还是 CommonJS？

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

### @advanced-rest-client/body-editor 可以商用吗？

@advanced-rest-client/body-editor 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @advanced-rest-client/body-editor 的下载量有多少？

根据 npm 官方下载统计，@advanced-rest-client/body-editor 在 2026/10/05 – 2026/11/03 这 30 天内被下载 3,295 次，日均约 110 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @advanced-rest-client/body-editor 还在维护吗？

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