Concept

An editor which is embedded in your HTML pages can be interacted with using our JavaScript API. See Embedding an Editor in your own portals

There are many reasons a team would want to do this. Some examples are:

Updating variables on document load
Connecting to a custom widget
Building a partial or complete custom interface
Creating a “Save” button or an auto-save feature

Connection To CHILI publisher

You cannot communicate with the CHILI publisher directly due to the editor running in an iframe and browser security blocking JavaScript communication across iframes.

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

You can install PublisherConnector via npm

npm i @chili-publish/publisher-connector

or through yarn

yarn add @chili-publish/publisher-connector

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

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

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

Once you have decided, it is time to begin your integration. There are three steps:

Create an instance of the PublishConnector
Listen to event for document to be fully rendered
Start making modifications

Create an instance of the PublishConnector

To create an instance of the PublisherConnector, you will need to use the “build” method and pass in the iframe element.

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

Click to see on-prem instructions

Do not follow these instructions if you are using CHILI publish Online

The iframe should contain an "onload" javascript, calling one of your own functions.
In this function, an editor instance can be requested (using a callback which receives the instance once the swf has actually finished loading):

<iframe id="chili-iframe" onload="iFrameLoaded()" src="EDITOR_URL" />

The GetEditor function will request the actual editor instance:

var editor;
var frameWindow;

function iFrameLoaded()
{
    frameWindow = document.getElementById("chili-iframe").contentWindow;
    frameWindow.GetEditor(EditorLoaded);
}

function EditorLoaded(jsInterface)
{
     editor = frameWindow.editorObject;
}

Please consult the JavaScript Security Considerations if this code is not working for you.

Registering To Events

Events can be handled by inserting an "OnEditorEvent" function in your HTML page.
The following events are always registered:

DocumentFullyLoaded
SelectedPageChanged
DocumentSaved

function OnEditorEvent(type,targetID)
{
    switch (type){
        case "DocumentFullyLoaded":
            //DO MAGIC
            break;
        case "SelectedPageChanged":
            ShowSelectedPage();
            break;
    }
}

To register additional events, you can call the "AddListener" function (and remove them using "RemoveListener"):

function EditorLoaded(jsInterface)
{
    editor = frameWindow.editorObject;
    editor.AddListener("CursorChanged");
}

Getting Object Instances

To provide immediate access to the entire document object model, CHILI Editor contains a number of functions which allow you to get information/set values/... based on a descriptor of the object.

Objects are "translated" to a JavaScript representation, which contains the various property values of the object as strings (or simple datatypes, where applicable).
If a simple datatype (e.g. string or boolean) is requested directly, it will be preserved in that type.

Object descriptors consist of a string pointing the functions to the appropriate object.
Point annotation can be used to get to properties.

For lists, you can use a "[]" annotation to provide one of the following descriptors to get an item (which will be evaluated in this order):

ID
Index
Name
Tag

function GetInfo()
{
   obj = editor.GetObject("document.pages[0].frames[0]");

   //LIST ALL PROPERTIES OF THE REQUESTED OBJECT:
   txt = "<table>";
   for (var i in obj)
   {
        txt += "<tr><td width=120>" + i + ":</td><td>" + obj[i] + "</td></tr>";
   }
   txt \+= "</table>"
   document.getElementById("objectInfo").innerHTML = txt;

   //GET ID ON FRAME OBJECT:
   var id1 = obj.id;
   //GET ID DIRECTLY, as a string:
   var id2 = editor.GetObject("document.pages[0].frames[0].id");
}

Setting Property Values

Using the object descriptor, you can also set property values:

function SetProperty()
{
   objDescriptor = "document.selectedFrame";
   propName = "borderWidth";
   propValue = "3";

   editor.SetProperty(objDescriptor,propName,propValue);
}

Calling Functions

For any of the found objects, you can also call any of the public functions:

function CreateFrame()
{
   frame = editor.ExecuteFunction("document.pages[1].frames","Add","rectangle","10mm","50mm","100mm","70mm");
   editor.SetProperty("document.pages[1].frames[" + frame.id + "]","borderWidth","5");
}

Getting started with your JavaScript integration