CHILI 出版界面
这个 出版者界面 库简化了与CHILI GraFx Publishinger的集成,提供了通过后Message与编辑对象互动的直截了当的手段. 这个库极大地简化了所有浏览器,包括基于Chromium的浏览器处理同源政策的复杂性.
注释:
- 出版商JavaScript API多年来一直保持稳定. 因此,达到主要版本1.x的这个库意味着,未来的更新将主要解决错误修正问题,因此应该罕见。 在这种情况下,没有更新是一个好兆头.
- 有些使用的案例可能不会被出版商界面支持. 参见 这里 用于不支持的用例.
- 先前命名为"Publisher Connector"的项目被更名为"Publisher Interface"来避免与未来的连接器插件系统相混淆. 如果您使用旧名和图书馆, 请更新您的项目 .
- 截至2023年,这是官方支持的唯一整合CHILIGRAFx出版商的方法.
该项目得到以下官方支持: CHILI 出版物。 。 。 .
目录
📘 完整文档 可在 维基百科。 。 。 .
安装
使用 npm 、 纱线、 bun 或直接通过 unpkg 在浏览器中安装 Publisher 界面 .
// 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个依赖,即: 彭帕尔 图书馆.
所有其他依赖性仅用于开发者工具,如自动生成文件、测试和包装等。 开发者依赖性并不总是最新的,这没关系,因为我们的焦点是保持软件包的更新,而开发者的工具只有在发布新版本时才会更新.
这意味着对安全问题的关注非常少,其局限性与《公约》所载限制相同 彭帕尔
浏览器支持
出版商界面在CHILI GraFx上运行成功,任何版本在6.5.5上或上方以上. 其还以Chrome,Firefox,Safari,和Edge等最新版本运行. 不支持 Internet Explorer .
开始
开始从unpkg取出包裹,或者通过国家防范机制、纱线或包子安装后导入.
//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 代码中:
- 获取包含的元素
- 启用构建元素方法
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。 。 。 .
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");
}
);
我们也可以使用 响起并等待 语法. 以下是使用同步/等待的上述例子:
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");
下面是一个完整的例子:
<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 () 方法 .
<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} 作为构建函数中常见的构建选项.
// 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和主页之间通信的信息.
为了处理潜在的连接故障,定义一个超时,如下文所示.
// 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秒后抛出一个超时.
读更多,看看我们 文档。 。 。 .