This guide describes how to configure Fonto Editor to use iframe communication instead of our postMessage API.
Fonto Editor can be opened as an iframe. To allow communication between Fonto Editor and the host application. A common use case of this is offering a way to end the editing session from inside Fonto Editor by saving the opened documents and closing the editor or causing Fonto Editor to go full screen.
Communicating from the
Fonto Editor iframe to its parent window
This use case describes direct interactions from the user that require direct feedback from the CMS. Examples interactions are: ‘Close Fonto Editor and return to the CMS’, ‘Save and close and return to the CMS’, ‘Toggle full screen’.
If the user clicks one of these buttons, Fonto Editor uses the HTML5 standard
postAPI to send the command to its parent window or frame. See postMessage API documentation for details.
messageis a serialized JSON representation of the message object.
The message object will always contain the following properties:
type: The message type, for example
scope: The scope object that was passed when Fonto Editor was opened, as specified in the CMS Connector contract.
metadata: An object that may contain command specific properties.
Event Listener('message', callback)
.attach– depending on the browser – and act accordingly. The CMS is responsible for closing the iframe, resizing the iframe, releasing locks and/or cleaning up automatic saves if necessary.
Save and close
One of the send-close-signal-to-iframe, the send-close-signal-to-iframe-discarding-changes and the save-and-release-all-locks-and-send-close-signal-to-iframe operations can be used to initiate a save and close operation. These operations trigger a postMessage event with the
type set to
"fontoxml-close" and the
metadata set to an object containing the
discard field, which is a
send method on Iframe
type set to
fontoxml-toggle-fullscreen and the
metadata containing a
boolean property named
is describing whether a full screen mode is requested. Call this method from an action to be able to use it from an operation.
example.com, Fonto Editor should also be hosted on
example.com. We do not support Cross Origin Resource Sharing (CORS).
The browser will automatically cause any
post requests that are targeting a wrong origin to be discarded. This will cause the request to time out. Not all browsers provide diagnostic messages for these errors. Messages that are being sent to the editor with a wrong origin cause a fatal error and will make the editor stop working.