Sign up (with export icon)

AIContainerSidebar

Api-interface iconinterface

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( {
		attachTo: 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

  • Chevron-right icon

    collapsible : boolean | undefined
    inherited

    When true, clicking the active tab button collapses the panel and toggles the ck-ai-tabs_collapsed CSS class on the AI tabs DOM element. Clicking the tab again expands it back. When false, clicking the active tab button is a no-op.

    Defaults to false.

  • 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.