ckeditorCKEditor 5 inspector
The official CKEditor 5 rich text editor instance inspector for developers.
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="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 <kbd>Alt</kbd>+<kbd>F12</kbd> (<kbd>⌥</kbd>+<kbd>F12</kbd> on Mac) keyboard shortcut.
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
} );Development
To configure the environment:
git clone git@github.com:ckeditor/ckeditor5-inspector.git
cd ckeditor5-inspector
yarn installWorking with the code
Start the webpack file watcher:
yarn devand open http://path/to/ckeditor5-inspector/sample/inspector.html in your web browser.
Building
To build the production version of the inspector, run:
yarn buildTesting
To run tests, execute:
yarn testReleasing the package
CircleCI automates the release process and can release both channels: stable (X.Y.Z) and pre-releases (X.Y.Z-alpha.X, etc.).
Before you start, you need to prepare the changelog entries.
- Make sure the
#masterbranch is up-to-date:git fetch && git checkout master && git pull. - Prepare a release branch:
git checkout -b release-[YYYYMMDD]whereYYYYMMDDis the current day. - Generate the changelog entries:
yarn run release:prepare-changelog.- You can specify the release date by passing the
--dateoption, e.g.,--date=2025-06-11. - By passing the
--dry-runoption, you can check what the script will do without actually modifying the files. - Read all the entries, correct poor wording and other issues, wrap code names in backticks to format them, etc.
- Add the missing
the/aarticles,()to method names, "it's" -> "its", etc. - A newly introduced feature should have just one changelog entry – something like "The initial implementation of the FOO feature." with a description of what it does.
- You can specify the release date by passing the
- Commit all changes and prepare a new pull request targeting the
#masterbranch. - Ping the
@ckeditor/ckeditor-5-platformteam to review the pull request and trigger the release process.
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.