NEWCKEditor 5 Long-term Support is here! Find out more
Sign up (with export icon)

AIContainerSidebar

Api-interface icon interface

The configuration of the AI user interface container in the sidebar mode. Provide an existing DOM element to use as the container the AI user interface will automatically render into that element.

Additionally, the tab buttons can be positioned on the preferred side of the container.

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		// ... Other configuration options ...
		ai: {
			container: {
				type: 'sidebar',

				// Existing DOM element to use as the container for the AI user interface.
				element: document.querySelector( '#ai-sidebar-container' ),

				// (Optional) The preferred side of the element to position the tab buttons.
				side: 'right'
			},
		}
	} )
	.then( ... )
	.catch( ... );
Copy code

Properties

  • element : HTMLElement

  • Chevron-right icon

    showResizeButton : boolean | undefined
    inherited

    This option is used to show or hide the resize button in the AI user interface.

    Defaults to true.

  • side : AIContainerSide | undefined

  • type : 'sidebar'

  • Chevron-right icon

    visibleByDefault : boolean | undefined
    inherited

    Whether the AI interface should be visible when the editor is created.