The official CKEditor 5 rich text editor instance inspector for developers.
Learn how to use the inspector and see it live in the Development tools guide.
Include the script to load the inspector:
<script src="path/to/inspector.js"></script>Call CKEditorInspector.attach( editor ) when the editor instance is ready:
ClassicEditor
.create( ... )
.then( editor => {
CKEditorInspector.attach( editor );
} )
.catch( error => {
console.error( error );
} );Note: You can attach to multiple editors under unique names at a time. Then you can select the editor instance in the drop–down inside the inspector panel to switch context.
CKEditorInspector.attach( {
'header-editor': editor1,
'footer-editor': editor2,
// ...
} );Call CKEditorInspector.detach( name ) to detach the inspector from an editor instance.
Tip: CKEditorInspector.attach() returns the generated name of the editor if it was not provided.
// Attach the inspector to two editor instances:
const generatedName = CKEditorInspector.attach( editor1 );
CKEditorInspector.attach( { arbitraryName: editor2 } );
// ...
// Detach from the instances:
CKEditorInspector.detach( generatedName );
CKEditorInspector.detach( 'arbitraryName' );When multiple CKEditor 5 instances are running in DOM, you can call CKEditorInspector.attachToAll( [ options ] ) to attach the inspector to all of them at the same time. A shorthand for CKEditorInspector.attach( editor, [ options ] ) called individually for each instance.
// Discover all editor instances in DOM and inspect them all.
CKEditorInspector.attachToAll();You can also pass the optional configuration object to this method.
Note: This method works with CKEditor v12.3.0 or later. Earlier editor versions will not be discovered.
Click the button in the upper-right corner of the inspector to quickly show or hide it. You can also use the Alt+F12 (⌥+F12 on Mac) keyboard shortcut.
You can pass configuration options to CKEditorInspector.attach() and CKEditorInspector.attachToAll() methods as the last argument:
CKEditorInspector.attach( editor, {
// configuration options
} );
CKEditorInspector.attach( { 'editor-name': editor }, {
// configuration options
} );
CKEditorInspector.attachToAll( {
// configuration options
} );To attach the inspector with a collapsed UI, use the options.isCollapsed option.
Note: This option works when CKEditorInspector.attach() is called for the first time only.
CKEditorInspector.attach( { 'editor-name': editor }, {
// Attach the inspector to the "editor" but the UI will be collapsed.
isCollapsed: true
} );To mount the inspector into a specific DOM element instead of the default document.body, use the options.container option.
This is useful in multi-window / multi-document environments (Electron, WebView2, iframes) where the global document of the realm that loaded the inspector script is not the document where the editor lives. Without this option, the inspector would be appended to the wrong document's <body> and remain invisible.
The inspector wrapper element is created in container.ownerDocument, so ReactDOM event delegation works correctly in the target document.
Note: This option works when CKEditorInspector.attach() is called for the first time only.
const editorIframe = document.getElementById( 'editor-frame' );
const editorDocument = editorIframe.contentDocument;
CKEditorInspector.attach( editor, {
// Mount the inspector into the iframe document where the editor lives,
// instead of the default `document.body` of the outer window.
container: editorDocument.body
} );Note
This project requires pnpm v10 or higher. You can check your version with pnpm --version and update if needed with npm install -g pnpm@latest.
To configure the environment:
git clone git@github.com:ckeditor/ckeditor5-inspector.git
cd ckeditor5-inspector
pnpm installStart the watch build:
pnpm run devThen open one of the demo pages from the sample directory and refresh the browser manually after each rebuild.
To build the production version of the inspector, run:
pnpm run buildTo run tests, execute:
pnpm run testLicensed under a dual-license model, this software is available under:
- the GNU General Public License Version 2 or later,
- or commercial license terms from CKSource Holding sp. z o.o.
For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.