hub / github.com/ckeditor/ckeditor5-inspector

github.com/ckeditor/ckeditor5-inspector @v5.0.2

Chat with this repo

repository ↗ · DeepWiki ↗ · release v5.0.2 ↗ · + Follow

416 symbols 1,152 edges 131 files 6 documented · 1% 2 cross-repo links

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

CKEditor 5 inspector

The official CKEditor 5 rich text editor instance inspector for developers.

The inspector panel attached to the editor instance.

Documentation 📖

Learn how to use the inspector and see it live in the Development tools guide.

Quick start

Include the script to load the inspector:

<script src="https://github.com/ckeditor/ckeditor5-inspector/raw/v5.0.2/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' );

Attaching to all editor instances

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.

Toggling the inspector visibility

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.

The button that toggles the inspector visibility.

Configuration

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
} );

`isCollapsed`

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
} );

`container`

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
} );

Development

[!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 install

Working with the code

Start the watch build:

pnpm run dev

Then open one of the demo pages from the sample directory and refresh the browser manually after each rebuild.

Building

To build the production version of the inspector, run:

pnpm run build

Testing

To run tests, execute:

pnpm run test

License

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

Core symbols most depended-on inside this repo

get

called by 54

src/localstoragemanager.js

destroy

called by 53

tests/utils/testeditor.js

attach

called by 50

src/ckeditorinspector.jsx

create

called by 50

tests/utils/testeditor.js

modelReducer

called by 43

src/model/data/reducer.js

expectPropertyValue

called by 37

tests/inspector/view/nodeinspector.jsx

viewReducer

called by 36

src/view/data/reducer.js

set

called by 23

src/localstoragemanager.js

Shape

Function 171

Method 143

Class 102

Languages

TypeScript100%

Modules by API surface

src/ckeditorinspectorui.jsx22 symbols

tests/utils/testeditor.js14 symbols

src/model/data/utils.js13 symbols

src/ckeditorinspector.jsx13 symbols

src/view/data/utils.js12 symbols

src/editorquickactions.jsx12 symbols

src/data/reducer.js12 symbols

src/view/utils.js9 symbols

src/view/selectioninspector.jsx9 symbols

src/model/selectioninspector.jsx9 symbols

src/model/data/reducer.js9 symbols

src/components/tree/treenode.js9 symbols

Used by 2 indexed graphs manifest dependencies, hub-wide

github.com/TriliumNext/Trilium

github.com/ckeditor/ckeditor5

For agents

$ claude mcp add ckeditor5-inspector \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact