Page Comparison

...

Therefore, if you want to utilize our JavaScript API across iframes you need to utilize our plugin: publisher-connector

You can install PublisherConnector publisherInterface via npm

Code Block

language	bash

npm i @chili-publish/publisher-connectorinterface

or through yarn

Code Block

language	bash

yarn add @chili-publish/publisher-connectorinterface

Or you can use the version from unpkg.com in your <script/> tags:

https://unpkg.com/@chili-publish/publisher-connector@latest/dist/PublisherConnectorpublisherInterface.min.js

Info

Which one should I use?

If you utilize the NPM package, you will get all the benefits of TypeScript declaration files. However, you will need to use a module bundler like Webpack, Parcel, Rollup, etc. to package your JavaScript files for the web.

If you want to use this library in your integration without requiring a build phase, or you just want something simple, you can utilize the unpkg.com URL

...

Create an instance of the PublishConnectorPublisherInterface
Listen to the event for the CHILI document to be fully rendered

Create an instance of the

...

PublisherInterface

To create an instance of the PublisherConnectorpublisherInterface, you will need to use the .build() method and pass in the iframe element.

...

Code Block

language	js

<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 {PublisherConnectorpublisherInterface} from 'https://unpkg.com/@chili-publish/publisher-connector@latest/dist/PublisherConnectorpublisherInterface.min.js';
    
        const iframe = document.getElementById("editor-iframe");
    
        (async () => {
            const publisherConnectorpublisherInterface = await PublisherConnectorpublisherInterface.build(iframe);
           
        })();
    </script>
</body>

...

Code Block

<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 {PublisherConnectorpublisherInterface} from 'https://unpkg.com/@chili-publish/publisher-connector@latest/dist/PublisherConnectorpublisherInterface.min.js';
    
        const iframe = document.getElementById("editor-iframe");
    
        PublisherConnectorpublisherInterface.build(iframe).then((connector)=>
          const publisherConnectorpublisherInterface = connector
        );
    </script>
</body>

...

Code Block

language	js

await publisherConnectorpublisherInterface.addListener(
  "DocumentFullyRendered", 
  target => console.log("document is rendered")
);

...

Code Block

language	js

<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 {PublisherConnectorpublisherInterface} from 'https://unpkg.com/@chili-publish/publisher-connector@latest/dist/PublisherConnectorpublisherInterface.min.js';
    
        const iframe = document.getElementById("editor-iframe");
    
        (async () => {
            const publisherConnectorpublisherInterface = await PublisherConnectorpublisherInterface.build(iframe);
            await publisherConnectorpublisherInterface.addListener(
              "DocumentFullyRendered", 
              target => { // Do stuff }
            );
           
        })();
    </script>
</body>

...

Code Block

<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 {PublisherConnectorpublisherInterface} from 'https://unpkg.com/@chili-publish/publisher-connector@latest/dist/PublisherConnectorpublisherInterface.min.js';
    
        const iframe = document.getElementById("editor-iframe");
    
        (async () => {
            try {
              const publisherConnectorpublisherInterface = await PublisherConnectorpublisherInterface.build(iframe);
              await publisherConnectorpublisherInterface.addListener(
                "DocumentFullyRendered", 
                target => { // Do stuff }
              );
            }
            catch(e) {
              console.log(e);
            }
           
        })();
    </script>
</body>

...

Code Block

<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 {PublisherConnectorpublisherInterface} from 'https://unpkg.com/@chili-publish/publisher-connector@latest/dist/PublisherConnectorpublisherInterface.min.js';
    
        const iframe = document.getElementById("editor-iframe");
    
        (async () => {
            try {
              const publisherConnectorpublisherInterface = await PublisherConnectorpublisherInterface.build(iframe);
              await publisherConnectorpublisherInterface.addListener(
                "DocumentFullyLoaded", 
                target => { // Do stuff - but be warned things can still change as they are being loaded }
              );
              await publisherConnectorpublisherInterface.addListener(
                "DocumentFullyRendered", 
                target => { // Do stuff }
              );
            }
            catch(e) {
              console.log(e);
            }
           
        })();
    </script>
</body>

...

You can check out pages like: Common JavaScript integration tasks, but you will notice they are using editor or editorObject and there is no Promise to be found in any of the examples. The reason it looks different is because all examples outside this one page communicate with CHILI publisher directly, meaning no iframe and no PublisherConnectorpublisherInterface. The PublisherConnector publisherInterface is just an interface that uses the postMessage() method, but under the hood it utilizes the direct editorObject.

...

Info

Confused?

When CHILI publisher loads it adds an object to the window called editorObject, or its alias editor. This object provides a series of methods that allow you to interact with the editor. So, you can access it via window.editorObject. However, this object is unreachable if CHILI publisher is running in an iframe. Therefore, we built a postMessage() interface called PublisherConnector publisherInterface which allows you to easily interact with the PublisherConnector publisherInterface object as though it was the editorObject.

However, because postMessage() works through events, there is a time delay, and therefore PublisherConnector publisherInterface object will return a Promise whereas the editorObject returns the response immediately.

...

There are a few differences between the PublisherConnector publisherInterface interface and the direct editorObject:

...

A small, but important difference is that the methods from the PublisherConnector publisherInterface uses common JavaScript naming - camel case. This differs from the Pascal case used by the editorObject.

So editorObject.GetObject() becomes publisherConnectorpublisherInterface.getObject().

So editorObject.SetProperty() becomes publisherConnectorpublisherInterface.setProperty().

Promise Return

While the editorObject methods return without delay, the PublisherConnector publisherInterface uses postMessage(). This means that the message must be serialized, sent, deserialized across from one window to another.

To make this easy, the PublisherConnector publisherInterface methods return a Promise.

...

Code Block
const documentId = editorObject.GetObject("document.id"); console.log(documentId);

You would do:

Code Block
publisherConnectorpublisherInterface.getObject("document.id").then( documentId => console.log(documentId) );

...

Code Block
const documentId = await publisherConnectorpublisherInterface.getObject("document.id"); console.log(documentId);

Just like editorObject methods, if something goes wrong, an Exception will be thrown.

Events

The PublisherConnector publisherInterface does events completely different from what is documented for the editorObject.

To use events with the editorObject, it involved calling the editorObject.AddListener() method and then defining a function on window.OnEditorEvent() method 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.

PublisherConnector 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.

Code Block
await publisherConnectorpublisherInterface.addListener( "FrameMoveFinished", target => console.log("Frame moved with id " + target) );

Removing an event is pretty much the same.

Code Block
await publisherConnectorpublisherInterface.removeListener("FrameMoveFinished");

Four

...

Common Uses

Okay now that you understand the difference between the PublishConnector PublisherInterface object and the editorObject, let us we can look at the four main methods on both objectsthese objects. Keep in mind that there are several methods, but we will only cover four use cases:

Listening to Events
Reading Properties
Setting Properties
Executing FunctionsFunction

Listening to Events

You can listen to events using this method .addListener(). The first parameter takes an event name (string) and a callback function to be called when the event is fired off.

PublisherConnector publisherInterface Object

Code Block
await publisherConnectorpublisherInterface.addListener( "FrameMoveFinished", target => console.log("Frame moved with id " + target) );

...

So, if you wanted to get the full document object you could do this:

PublisherConnector publisherInterface Object

Code Block
const chiliDoc = await publisherConnectorpublisherInterface.getObject("document");

editorObject Object

...

Code Block
console.log("Document name is:" + await publisherConnectorpublisherInterface.getObject("document"));

The string document.name is commonly referred to as CHILI path. It is the key/value path of the object.

...

Code Block
console.log("First frame on page 2 id is:" + await publisherConnectorpublisherInterface.getObject("document.pages[1].frames[0]"));

...

Okay we know how to read properties, but how do we set properties? We utilize the setProperty() method. This method takes a CHILI path string, the property to set, and the value to set it to.

PublisherConnector publisherInterface Object

Code Block
await publisherConnectorpublisherInterface.setProperty("document", "zoom", 100);

...

So, for example, creating a new frame:

PublisherConnector publisherInterface Object

Code Block
const newFrame = await publisherConnectorpublisherInterface.executeFunction("document.pages[1].frames","Add","rectangle","10mm","50mm","100mm","70mm");

...

Code Block
const xml = await publisherConnectorpublisherInterface.executeFunction("document", "GetTempXML");

...

Versions Compared

Old Version 7

New Version Current

Key

Create an instance of the

PublisherInterface

Promise Return

Events

Four

Common Uses

Listening to Events