# @chili-publish/publisher-interface 中文文档

规范地址：https://npmcn.com/package/%40chili-publish/publisher-interface/

版本：1\.0\.1
npm 元数据更新时间：2025-12-18T13:02:29.898Z
中文译文更新时间：2026-11-09T13:11:43.719Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：164 kB，9 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2022-10-20T11:01:47.853Z
- 最新版本发布：2023-10-17T20:48:44.415Z
- 近 30 天下载量：3357（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 0 个）

## 中文简介

PublisherInterface是一个类对象,允许您通过PostMessage与CHILIPublisher编辑器Object进行交互,而不需要PostMessage的复杂性.

## 安装

```sh
npm install @chili-publish/publisher-interface
```

也可以使用：`pnpm add @chili-publish/publisher-interface`、`yarn add @chili-publish/publisher-interface`、`bun add @chili-publish/publisher-interface`

## README

# CHILI 出版界面

这个 **出版者界面** 库简化了与CHILI GraFx Publishinger的集成,提供了通过后Message与编辑对象互动的直截了当的手段. 这个库极大地简化了所有浏览器,包括基于Chromium的浏览器处理同源政策的复杂性.

注释:

-   出版商JavaScript API多年来一直保持稳定. 因此,达到主要版本1.x的这个库意味着,未来的更新将主要解决错误修正问题,因此应该罕见。 在这种情况下,没有更新是一个好兆头.
-   有些使用的案例可能不会被出版商界面支持. 参见 这里 用于不支持的用例.
-   先前命名为"Publisher Connector"的项目被更名为"Publisher Interface"来避免与未来的连接器插件系统相混淆. 如果您使用旧名和图书馆, 请更新您的项目 .
-   截至2023年,这是官方支持的唯一整合CHILIGRAFx出版商的方法.

  

该项目得到以下官方支持: [CHILI 出版物](https://chili-publish.com/)。 。 。 .

## 目录

-   [安装](https://npmcn.com/package/%40chili-publish/publisher-interface/#readme-installation)
-   [开始](https://npmcn.com/package/%40chili-publish/publisher-interface/#readme-getting-started)
-   [调试](https://npmcn.com/package/%40chili-publish/publisher-interface/#readme-debugging)

  

📘 **完整文档** 可在 [维基百科](https://github.com/chili-publish/publisher-interface/wiki)。 。 。 .

## 安装

使用 npm 、 纱线、 bun 或直接通过 unpkg 在浏览器中安装 Publisher 界面 .

```javascript
// npm
npm i @chili-publish/publisher-interface

// yarn
yarn add @chili-publish/publisher-interface

// bun
bun install @chili-publish/publisher-interface

// browser
import {PublisherInterface} from "https://unpkg.com/@chili-publish/publisher-interface@latest/dist/PublisherInterface.min.js";
```

## 依赖关系

出版商界面有1个依赖,即: [彭帕尔](https://github.com/Aaronius/penpal) 图书馆.

所有其他依赖性仅用于开发者工具,如自动生成文件、测试和包装等。 开发者依赖性并不总是最新的,这没关系,因为我们的焦点是保持软件包的更新,而开发者的工具只有在发布新版本时才会更新.

这意味着对安全问题的关注非常少,其局限性与《公约》所载限制相同 [彭帕尔](https://github.com/Aaronius/penpal)

### 浏览器支持

出版商界面在CHILI GraFx上运行成功,任何版本在6.5.5上或上方以上. 其还以Chrome,Firefox,Safari,和Edge等最新版本运行. 不支持 Internet Explorer .

  

# 开始

开始从unpkg取出包裹,或者通过国家防范机制、纱线或包子安装后导入.

```javascript
//unpkg
import {PublisherInterface} from "https://unpkg.com/@chili-publish/publisher-interface@latest/dist/PublisherInterface.min.js";

// npm, yarn, bun
import {PublisherInterface} from "@chili-publish/publisher-interface";
```

  

随后,在您的 JavaScript 代码中:

-   获取包含的元素
-   启用构建元素方法

```javascript
const editorDiv = document.getElementById("editor-div");
const publisher = PublisherInterface.buildOnElement(editorDiv, "https://example.chili-publish.online/example/editor_html.aspx?doc=3d178228-a9b9-49d0-90d9-c1c8f8b67f05&apiKey=Sczs1ruhiZcaFiqg0G0").then(
    publisher => publisher.alert("Hi!")
);
```

  

上面的代码将在元素上创建一个 iframe, 使用 `id` 使用 URL 在函数中传递的“ 编辑- div” 作为 `src`。 。 。 .

对于 Iframe 造型, 使用 `publisher.iframe`。 。 。 .

```javascript
const editorDiv = document.getElementById("editor-div");
const publisher = PublisherInterface.buildOnElement(editorDiv, "https://example.chili-publish.online/example/editor_html.aspx?doc=3d178228-a9b9-49d0-90d9-c1c8f8b67f05&apiKey=Sczs1ruhiZcaFiqg0G0").then(
    publisher => {
        publisher.iframe.classList.add("coolIFrameStyleInCSS");
    }
);
```

  
  

我们也可以使用 [响起并等待](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises#async_and_await) 语法. 以下是使用同步/等待的上述例子:

```javascript
const editorDiv = document.getElementById("editor-div");
const publisher = await PublisherInterface.buildOnElement(editorDiv, "https://example.chili-publish.online/example/editor_html.aspx?doc=3d178228-a9b9-49d0-90d9-c1c8f8b67f05&apiKey=Sczs1ruhiZcaFiqg0G0");
publisher.iframe.classList.add("coolIFrameStyleInCSS");
```

  

下面是一个完整的例子:

```html
<body>
    <div id="editor-div"></div>
    <iframe id="editor-iframe" style="width:1200px; height:800px"
        src="https://example.chili-publish.online/example/editor_html.aspx?doc=3d178228-a9b9-49d0-90d9-c1c8f8b67f05&apiKey=Sczs1ruhiZcaFiqg0G0"></iframe>
    <script type="module">
        import {PublisherInterface} from 'https://unpkg.com/@chili-publish/publisher-interface@latest/dist/PublisherInterface.min.js';
    
        const element = document.getElementById("editor-div");
    
        (async () => {
            const publisher = await PublisherInterface.buildOnElement(element, "https://example.chili-publish.online/example/editor_html.aspx?doc=3d178228-a9b9-49d0-90d9-c1c8f8b67f05&apiKey=Sczs1ruhiZcaFiqg0G0");
            
            publisher.iframe.classList.add("coolIFrameStyleInCSS");
            
            const documentName = await publisher.getObject("document.name");
            
            console.log(documentName);
        })();
    </script>
</body>
```

  

## 属于你的框架

在1.0之前的版本中,您需要使用自己的iframe来构建 `PublisherInterface` 课.

要使用您的 Iframe, 请使用 builtWithIframe () 方法 .

```html
<body>
    <iframe id="editor-iframe" style="width:1200px; height:800px"
        src="https://example.chili-publish.online/example/editor_html.aspx?doc=3d178228-a9b9-49d0-90d9-c1c8f8b67f05&apiKey=Sczs1ruhiZcaFiqg0G0"></iframe>
    <script type="module">
        import {PublisherInterface} from 'https://unpkg.com/@chili-publish/publisher-interface@latest/dist/PublisherInterface.min.js';
    
        const iframe = document.getElementById("editor-iframe");
    
        (async () => {
            const publisher = await PublisherInterface.buildWithIframe(iframe);
            const documentName = await publisher.getObject("document.name");
            console.log(documentName);
        })();
    </script>
</body>

```

  

🚨 **重要** - 说吧 `buildWithIframe()` 如果在构建( ) 之前调用 iframe 负载, 将不会解决 。 优先使用 `buildOnElement()`。 。 。 .

  

## 调试

通过通过激活调试 `{debug: true}` 作为构建函数中常见的构建选项.

```javascript
// If you are letting the iframe be built on an element
PublisherInterface.buildOnElement(element, "https://example.chili-publish.online/example/editor_html.aspx?doc=3d178228-a9b9-49d0-90d9-c1c8f8b67f05&apiKey=Sczs1ruhiZcaFiqg0G0", {debug: true})

// If you are using your own iframe
PublisherInterface.buildWithIframe(iframe, {debug: true});
```

这将在控制台上显示关于iframe和主页之间通信的信息.

  

为了处理潜在的连接故障,定义一个超时,如下文所示.

```javascript
// If you are letting the iframe be built on an element
PublisherInterface.buildOnElement(element, "https://example.chili-publish.online/example/editor_html.aspx?doc=3d178228-a9b9-49d0-90d9-c1c8f8b67f05&apiKey=Sczs1ruhiZcaFiqg0G0", {debug: true, timeout: 10000})

// If you are using your own iframe
PublisherInterface.buildWithIframe(iframe, {debug: true, timeout: 10000});
```

如果在超时前连接尚未建立, 则会丢弃例外 。 在下面的例子中,如果没有建立连接,构建方法会在10秒后抛出一个超时.

  

读更多,看看我们 [文档](https://npmcn.com/package/%40chili-publish/publisher-interface/#readme-documentation)。 。 。 .

## 常见问题

### @chili-publish/publisher-interface 是什么？

PublisherInterface是一个类对象,允许您通过PostMessage与CHILIPublisher编辑器Object进行交互,而不需要PostMessage的复杂性\.

### 如何安装 @chili-publish/publisher-interface？

在项目目录运行 npm install @chili-publish/publisher-interface，或使用 pnpm add / yarn add / bun add。

### @chili-publish/publisher-interface 支持 TypeScript 吗？

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

### @chili-publish/publisher-interface 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @chili-publish/publisher-interface 可以商用吗？

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

### @chili-publish/publisher-interface 的下载量有多少？

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

### @chili-publish/publisher-interface 还在维护吗？

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