Embedding an Editor in your own portals

CHILI Editor has been written to be integrated. A very important part of this is embedding the Editor in an iframe in your own websites.

Resources

To get started, you may want to get acquainted with a series of resources used to embed the editor:

• WorkSpaces
• ViewPreferences
• Document Constraints

All of these can be used to influence how a document is visualized to an end user in the Editor.

Workspaces are created from within the editor, and basic management is available in the backoffice. They influence the interface of the editor (panels, toolbar items, colors, icons, ...).You can edit properties for all interface items in the Editor itself, and then save it to the server for later use. Saving can typically be done in the left panels: Environment > WorkSpace.

ViewPreferences are also created in the Editor itself. They determine how the user interacts with the document (display of guides, flow of pages, ...). You can edit and save viewpreferences in the Editor, typically in the left Panels: Environment > Viewpreferences.

Document Constraints define rules to block certain functionalities within the document itself. These constraints can also be applied directly in the document (on the document, pages, layers or individual frames). But the rules allow you to do this automatically based on certain conditions (eg: all layers where the name contains the work "lock").

Dynamic Resources

Your own application will manage the logic of using the correct resources (workspace, viewpreferences, ...). But in some cases you may not want to set up a workspace for each instance. The workspace may (for example) contain an "External Assets" panel. But the URL for that panel can change per individual user.

In those cases, you can use the API to dynamically create a new workspace and apply that to the editor. You can follow this logic, for example:
1 Determine the "Basic" workspace which applies to your user, based on your own logic.
For example the workspace with the path "Basic WorkSpaces/simple.xml"
2 Get the underlying XML of that workspace using the API
3 Modify the retrieved XML in your own application
4 Create a new workspace using the modified XML
5 Use the ID of the new workspace for the editor URL.

Preparing the document

Before showing a document to the user, you may want to prepare its content (or even create a new document, for example based on an existing one). Various webservice functions are available for this. Some typical tasks in this phase are:

• Setting the values of variable data or even their configuration (see Webservice Functions - DocumentSetVariableValues and Webservice Functions - DocumentSetVariableDefinitions
• Modifying the document's XML directly (using Webservice Functions - ResourceItemGetXML and ?Webservice Functions - ResourceItemSave). Together with the document object model, this allows you to:
  • Have even greater control over variables
  • Dynamically insert resources (eg fonts, colors, ...)
  • Dynamically insert new content (frames, pages, ...)
  • Update positioning of existing content (eg frames, maybe in combination with their "tag" for finding the correct content)
  • ...

Getting a URL

You can get a URL for the editor using the DocumentGetEditorURL function. In this function you can also specify which workspace, viewpreferences, etc. to apply to the editor.

If you dont want your user to be able to manage the workspace in the editor (even though the API user youre logged in with is an administrator), you can use the SetWorkspaceAdministration function to toggle this value. More settings (both using the API and querystring variables) can be found here: Influencing the behavior of the embedded Editor

JavaScript integration

Finally you can also interact with the Editor from within your HTML pages. It is even possible to call an Editor with a blank workspace, and build an alternative interface around it yourself (although this is typically done for simpler things, such as alternative navigation for the Viewer).

See HTML and JavaScript Integration for more information.