@chili-publish/publisher-interface
Advanced tools
PublisherInterface is a class object that allows you to interact with the CHILI Publisher editorObject via postMessage without the complexity of postMessage.
PublisherInterface is a class object that allows you to interact with the CHILI Editor editorObject via postMessage without the complexity of postMessage.
Why choose this over interacting with the editorObject directly?
As of version 0.3, the project name was changed from PublisherConnector to PublisherInterface to avoid confusion with future connector plugins.
You can install PublisherInterface via npm
npm i @chili-publish/publisher-interface
or through yarn
yarn add @chili-publish/publisher-interface
If you downloaded the library:
import {PublisherInterface} from "@chili-publish/publisher-interface";
or using in the web via unpkg URL:
import {PublisherInterface} from "https://unpkg.com/@chili-publish/publisher-interface@latest/dist/PublisherInterface.min.js";
const iframe = document.getElementById("editor-iframe");
PublisherInterface.build(iframe).then(
PublisherInterface => PublisherInterface.alert("Hi!")
);
The PublisherInterface build method must be called before the IFrame loads the Editor. This is due to
how Penpal, the library the PublisherInterface is built on, functions.
If you set the src attribute of the IFrame in your HTML and have a script tag that runs the build method, then
everything will be fine. The issue is only if you were to wait until IFrame was loaded before calling the build
method.
For example the below code will work because the build method is called before the IFrame is loaded.
<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=Sczs1ruhiZcaFiqg0G07gMFMq07X+SG2o8KlW8oAeZGvqoB1a0YvkbeZU1wJK15aIhANgZmhg+13NQlxpBEq7Q=="></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 PublisherInterface = await PublisherInterface.build(iframe);
const documentName = await PublisherInterface.getObject("document.name");
console.log(documentName);
})();
</script>
</body>
editorObjectThe PublisherInterface class and editorObject object share many similarities. This is not odd as the PublisherInterface is an interface for interacting with the editorObject via postMessage. Below will mark any key differences.
A small, but important difference is that the methods from the PublisherInterface uses common JavaScript naming - camel case. This differs from the Pascal case used by the editorObject.
So editorObject.GetObject becomes PublisherInterface.getObject.
So editorObject.SetProperty becomes PublisherInterface.setProperty.
While the editorObject methods return without delay, the PublisherInterface uses postMessage. This means that the message must be serialized, sent, deserialized across from one window to another.
To make this easy, the PublisherInterface methods return a Promise.
So instead of:
const documentId = editorObject.GetObject("document.id");
console.log(documentId);
You would do:
PublisherInterface.getObject("document.id").then(
documentId => console.log(documentId)
);
or use await, in a function marked async:
const documentId = await PublisherInterface.getObject("document.id");
console.log(documentId);
Just like editorObject methods, if something goes wrong, an error will be thrown.
The PublisherInterface does events completely different from what is documented for the editorObject.
To use events with the editorObject, it involved called the editorObject.AddListener method and then defining a
function on window.OnEditorEvent that took a string for events. The OnEditorEvent function would typically have a
switch case or a series of if/else to determine which event was called.
PublisherInterface makes things much simpler. If you want to listen to an event and then do something, then name it and add a callback function.
await PublisherInterface.addListener(
"FrameMoveFinished",
target => console.log("Frame moved with id " + target)
);
Removing an event is pretty much the same.
await PublisherInterface.removeListener("FrameMoveFinished");
When not using postMessage, there were two common methods to get the editorObject.
Neither of these methods are possible now, and you will need to use the build method on PublisherInterface. See Usage
above.
PublisherInterface is built on Penpal, which means that it inherits all same limitations.
PublisherInterface runs successfully on the most recent versions of Chrome, Firefox, Safari, and Edge. Internet Explorer is not supported.
See Penpal Errors
FAQs
PublisherInterface is a class object that allows you to interact with the CHILI Publisher editorObject via postMessage without the complexity of postMessage.
The npm package @chili-publish/publisher-interface receives a total of 414 weekly downloads. As such, @chili-publish/publisher-interface popularity was classified as not popular.
We found that @chili-publish/publisher-interface demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious npm packages targeting React, Vue, Vite, Node.js, and Quill remained undetected for two years while deploying destructive payloads.
Security News
Open source maintainers are urging GitHub to let them block Copilot from submitting AI-generated issues and pull requests to their repositories.
Research
Security News
Malicious Koishi plugin silently exfiltrates messages with hex strings to a hardcoded QQ account, exposing secrets in chatbots across platforms.