# @dskripchenko/embed 中文文档

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

版本：1\.7\.0
npm 元数据更新时间：2026-10-31T21:33:53.450Z
中文译文更新时间：2026-11-01T00:46:03.104Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：9.7 MB，32 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=20
- 运行依赖：0 个
- 首次发布：2026-10-26T10:08:05.885Z
- 最新版本发布：2026-10-31T21:33:53.076Z
- 已发布版本数：19（近 12 个月 19 个）

## 中文简介

来自CDN的任何网页的自定义元素：视频和音频播放器，Mermaid图表，OpenAPI引用，流程流，实时标记和所见即所编辑器，共享一个Vue运行时，并通过块注册表和事件总线进行协作。

## 安装

```sh
npm install @dskripchenko/embed
```

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

## README

# @dskripchenko /嵌入

[![npm](https://img.shields.io/npm/v/@dskripchenko/embed.svg)](https://www.npmjs.com/package/@dskripchenko/embed) [![license](https://img.shields.io/npm/l/@dskripchenko/embed.svg)](https://npmcn.com/package/%40dskripchenko/embed/LICENSE)

视频和音频播放器、Mermaid图、OpenAPI引用、流程流、 live markdown和WYSIWYG编辑器-作为HTML标签 **任何** 页面：纯HTML； CMS, WordPress, Blade, React。来自CDN的一个脚本。元素共用一个 Vue和一个UI工具包，呈现彼此的块，并通过DOM事件进行对话。

[**英语**](https://npmcn.com/package/%40dskripchenko/embed/docs/en/getting-started.md) · [Русский](https://npmcn.com/package/%40dskripchenko/embed/docs/ru/getting-started.md) · [多伊奇](https://npmcn.com/package/%40dskripchenko/embed/docs/de/getting-started.md) · [中文](https://npmcn.com/package/%40dskripchenko/embed/docs/zh/getting-started.md)

```html
<head>
  <script src="https://cdn.jsdelivr.net/npm/@dskripchenko/embed@1/dist/embed.js"></script>
</head>
<body>
  <dsk-flow src="/process.json" poll-url="/process/state" openapi-target="#api" media-target="#tour"></dsk-flow>
  <dsk-video id="tour" src="/tour.mp4">
    <track kind="chapters" src="/tour.chapters.vtt" default>
  </dsk-video>
  <dsk-openapi id="api" src="/openapi.yaml" height="720"></dsk-openapi>

  <dsk-markdown>
    <script type="text/markdown">
      ```mermaid
      sequenceDiagram
        Shop->>Payments: charge
      ```
    </script>
  </dsk-markdown>

  <form method="post"><dsk-editor name="body"></dsk-editor></form>
</body>
```

单击流程步骤将打开其API操作，并播放该步骤的章节 视频;降价图表是实时的；编辑器提交HTML和表单。

## 元素

|  |  | 建立在 |
| --- | --- | --- |
| `<dsk-video>` | 播放器：来源和质量菜单，字幕，章节，缩略图，HLS | [`@dskripchenko/ui`](https://github.com/dskripchenko/ui) |
| `<dsk-audio>` | 播放器，播放列表，波形 | `@dskripchenko/ui` |
| `<dsk-diagram>` | 美人鱼，PlantUML, Graphviz DOT, D2， DBML, Structurizr, Wardley→SVG，未加载Vue | [`@dskripchenko/diagrams`](https://github.com/dskripchenko/diagrams) |
| `<dsk-openapi>` | 完整的参考（几个规范），一个操作，或一个活动的API块 | [`@dskripchenko/openapi`](https://github.com/dskripchenko/openapi) |
| `<dsk-flow>` | 通过纯HTTP进行监视、切换和子流程的流程视图——或者编辑器 | [`@dskripchenko/flow`](https://github.com/dskripchenko/flow) |
| `<dsk-asyncapi>` | AsyncAPI 2。x / 3.0事件驱动API的参考 | `@dskripchenko/openapi` |
| `<dsk-bpmn>`， `<dsk-dmn>` | 建模器（视图或编辑器）中列出的BPMN流程和DMN决策 | [`@dskripchenko/bpmn`](https://github.com/dskripchenko/bpmn) |
| `<dsk-drawio>` | 画画。io文件到SVG，页面选项卡，没有Vue加载 | [`@dskripchenko/drawio`](https://github.com/dskripchenko/drawio) |
| `<dsk-kanban>` | 用标记形式书写的看板：栏、道、标签、在制品限制；拖牌，编辑，锁 | `@dskripchenko/ui` |
| `<dsk-calendar>` | 以标记形式编写的事件，重复：日、周、月、年、议程；拖拽，事件生成器，锁 | `@dskripchenko/ui` |
| `<dsk-board>` | 无限白板：形状、粘性、框架、连接器、笔-视图、编辑器或实时编辑的共享板 | [`@dskripchenko/board`](https://github.com/dskripchenko/board) |
| `<dsk-markdown>` | 使用活动块Markdown：上面每种语法的图表， `bpmn`， `dmn`， `drawio`， `openapi`， `asyncapi`， `flow`， `board`， `kanban`， `calendar`， `video`， `audio` | `@dskripchenko/ui` |
| `<dsk-editor>` | WYSIWYG与相同的活块；表单字段 | [`@dskripchenko/wysiwyg`](https://github.com/dskripchenko/wysiwyg) |

所有属性：attributes↔properties； `dsk:*` 事件, `ready`， `loading="lazy"`， 轻DOM（你的CSS应用）；图表，流程，流，板和参考打开全屏。→ [元素](https://npmcn.com/package/%40dskripchenko/embed/docs/en/elements.md)

## 一起工作

-   **一个运行时。** 加载器编写一个导入映射，将Vue、工具包和 插件包到发布的确切版本；每个元素和 live block在一个Vue应用上下文中呈现——一个locale，一个theme，一个set 块渲染器。
-   **块。** `DskEmbed.blocks.register('chart', renderer)` -活块 套件和编辑的合同 ` ```chart ` 住在 Markdown，在编辑器和 `DskEmbed.renderBlocks(root)`，这就变成 储存的HTML (`<pre><code class="language-…">`)变成小部件。→ [块](https://npmcn.com/package/%40dskripchenko/embed/docs/en/blocks.md)
-   **配置。** `DskEmbed.configure({ theme: 'light' | 'dark' | 'system', locale: 'en' | 'ru' })`， 或者只是页面的 `<html data-theme lang>`． → [配置和事件](https://npmcn.com/package/%40dskripchenko/embed/docs/en/config-and-events.md)
-   **事件。** `DskEmbed.on('node', …)`，或者 `addEventListener('dsk:node', …)` 在 任何祖先;React和其他主机使用ref和普通侦听器。→ [框架](https://npmcn.com/package/%40dskripchenko/embed/docs/en/frameworks.md)

## 加载器或包

|  | gzip |  |
| --- | --- | --- |
| `dist/embed.js` -装载机 | **9.1 KB** | 经典的脚本;元素、API、导入映射。其他的都随叫随到。 |
| `dist/embed.bundle.js` ——胖子 | **563 KB** (2.0 MB) | 所有内部;没有导入映射，没有进一步的请求。 |
| `dist/bundles/<plugin>.js` -每个插件一个 | **91 - 227 KB** | 我们和里面的工具箱；一个页面上的几个共享一个运行时。→ [开始](https://npmcn.com/package/%40dskripchenko/embed/docs/en/getting-started.md#per-plugin-bundles) |

加载器按需获取的内容(已发布文件的gzip -9； jsdelivery 供应小一点的Brotli)；

| 的第一要素…… | 获取 |  |
| --- | --- | --- |
| 任意值元素 | Vue运行时41.5 KB， `@dskripchenko/ui` 102.6 KB（里面的图标）+ CSS 30.1 KB | 每页一次 |
| `<dsk-video>` / `<dsk-audio>` | 插件3.5 KB；仅为14.6 KB的HLS适配器 `.m3u8` |  |
| `<dsk-diagram>` | 插件0.8 KB； `@dskripchenko/diagrams` 99.7 KB，套件令牌2.4 KB | 没有Vue，没有套件组件 |
| `<dsk-openapi>` | 插件1.4 KB， `@dskripchenko/openapi` 180.5 KB + CSS 10.5 KB，图标5.2 KB |  |
| `<dsk-flow>` | 插件2.5 KB； `@dskripchenko/flow` 79.9 KB + CSS 4.6 KB，图标5.2 KB；美人鱼导入（2.4 KB +图表）仅适用于美人鱼源和编辑器 |  |
| `<dsk-board>` | 插件1.3 KB， `@dskripchenko/board` 46.4 KB（里面的图标）+ CSS 1.9 KB |  |
| `<dsk-markdown>` | 插件0.5 KB | 块加载自己的插件 |
| `<dsk-editor>` | 插件1.1 KB， `@dskripchenko/wysiwyg` 18.2 KB + CSS 2.3 KB，图标5.2 KB |  |

图标文件（76个图标，一个文件）是共享的：由第一个获取一次 Openapi、flow和编辑器。

→ [开始](https://npmcn.com/package/%40dskripchenko/embed/docs/en/getting-started.md)片段，自托管， 使用您自己的导入映射、CSP、版本控制进行组合。

## 吃嫩叶的动物

当前的Chromium， Safari和Firefox。加载器需要导入映射；有 没有遗留构建。测试在铬和WebKit（剧作家）：两个构建， 两种主题，两种语言，桌面和手机。

## 已知的限制

-   **主题是整页的** （`<html data-theme>`)：套件的主题是 上定义 `:root`，它的菜单和对话框都在 `<body>`.

## 开发

```bash
pnpm install
pnpm build              # dist/ and the size table
pnpm test               # unit tests (vitest, jsdom)
pnpm lint && pnpm typecheck
node scripts/fixtures.mjs           # media fixtures for the browser check (ffmpeg)
pnpm check:browser                  # Chromium + WebKit against a local mirror of the CDN
node scripts/mirror.mjs <dir>       # self-hosting: the runtime in the CDN's layout
node scripts/demo.mjs <dir> --local # the demo page (examples/demo) for a host site
```

浏览器检查服务 `node_modules` jsdeliver服务npm的方式 （`/npm/<pkg>@<version>/…`（只有准确的版本）从第二个来源，所以 导入映射、跨原点模块加载和版本引脚将被执行 为真实的。

## 许可证

[麻省理工学院](https://npmcn.com/package/%40dskripchenko/embed/LICENSE)

## 常见问题

### @dskripchenko/embed 是什么？

来自CDN的任何网页的自定义元素：视频和音频播放器，Mermaid图表，OpenAPI引用，流程流，实时标记和所见即所编辑器，共享一个Vue运行时，并通过块注册表和事件总线进行协作。

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

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

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

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

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

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @dskripchenko/embed 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

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

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

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

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