custom-view.adoc

Custom view

{productname} allows developers to create custom views and attach them to the main editor view. This feature enables the creation of additional UI components that can be toggled on or off. When toggled on, the custom view replaces the editor, providing a distinct visual space for specialized functionality.

partial$misc/admon-iframe-only.adoc

Editor View API

The addView API in the editor’s UI registry allows developers to register new view containers. These containers are initially hidden (off) and attached next to the main view. The visibility of these custom views can be toggled using the ToggleView command. The state of the custom view can be queried using the queryCommandValue method.

This is the syntax for the addView function: editor.ui.registry.addView(name: String, obj: View.ViewSpec)

Parameters

Parameter	Type	Description
name	String	The name parameter is a unique identifier for the new view.
obj	View.ViewSpec	The obj parameter is the view specification object.

View Specification Object

Property	Type	Description
buttons	Array	The buttons property specifies an array of buttons to be displayed in the top right corner of the view.
onShow	Function	The onShow property specifies a function to be called when the view is displayed. It receives an API object.
onHide	Function	The onHide property specifies a function to be called when the view is hidden. It receives an API object.

Toggling the Custom View

To toggle the custom view, you can use the ToggleView command. Here is an example of how to use it:

// Assuming 'myCustomView' is the name of your custom view
editor.execCommand('ToggleView', false, 'myCustomView');

Querying the State of the Custom View

To query the state of the custom view (whether it is currently visible or hidden), you can use the queryCommandValue method:

// Assuming 'myCustomView' is the name of your custom view
editor.queryCommandValue('ToggleView') == 'myCustomView';

Options

partial$configuration/view_show.adoc

Interactive example

This example shows how to integrate a custom view using the addView API.

liveDemo::custom-view[]