{"id":28633446,"url":"https://github.com/ckeditor/ckeditor5-inspector","last_synced_at":"2025-06-12T15:08:37.971Z","repository":{"id":34260023,"uuid":"172749845","full_name":"ckeditor/ckeditor5-inspector","owner":"ckeditor","description":"CKEditor 5 inspector. ","archived":false,"fork":false,"pushed_at":"2025-05-20T10:25:37.000Z","size":5539,"stargazers_count":33,"open_issues_count":35,"forks_count":9,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-20T11:34:26.804Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ckeditor.com/ckeditor-5","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ckeditor.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-02-26T16:38:14.000Z","updated_at":"2025-03-14T10:22:49.000Z","dependencies_parsed_at":"2024-01-09T10:47:34.202Z","dependency_job_id":"2963d9e2-b59f-4621-ad8b-0e38e0a39eb4","html_url":"https://github.com/ckeditor/ckeditor5-inspector","commit_stats":{"total_commits":411,"total_committers":14,"mean_commits":"29.357142857142858","dds":0.3090024330900243,"last_synced_commit":"43f804875a6c9c624c2bc9e7f28fddc549009e68"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/ckeditor/ckeditor5-inspector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckeditor%2Fckeditor5-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckeditor%2Fckeditor5-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckeditor%2Fckeditor5-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckeditor%2Fckeditor5-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ckeditor","download_url":"https://codeload.github.com/ckeditor/ckeditor5-inspector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckeditor%2Fckeditor5-inspector/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259490549,"owners_count":22865767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-12T15:08:34.958Z","updated_at":"2025-06-12T15:08:37.955Z","avatar_url":"https://github.com/ckeditor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"CKEditor 5 inspector\n=====================================\n\n[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-inspector.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-inspector)\n[![CircleCI](https://circleci.com/gh/ckeditor/ckeditor5-inspector.svg?style=shield)](https://app.circleci.com/pipelines/github/ckeditor/ckeditor5-inspector?branch=master)\n[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5-inspector/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-inspector?branch=master)\n\nThe official [CKEditor 5](https://ckeditor.com/ckeditor-5) rich text editor instance inspector for developers.\n\n![The inspector panel attached to the editor instance.](/sample/screenshot.png)\n\n## Documentation 📖\n\nLearn how to use the inspector and see it live in the [Development tools](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/development-tools.html) guide.\n\n## Quick start\n\nInclude the script to load the inspector:\n\n```html\n\u003cscript src=\"path/to/inspector.js\"\u003e\u003c/script\u003e\n```\n\nCall `CKEditorInspector.attach( editor )` when the editor instance is ready:\n\n```js\nClassicEditor\n\t.create( ... )\n\t.then( editor =\u003e {\n\t\tCKEditorInspector.attach( editor );\n\t} )\n\t.catch( error =\u003e {\n\t\tconsole.error( error );\n\t} );\n```\n\n**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.\n\n```js\nCKEditorInspector.attach( {\n\t'header-editor': editor1,\n\t'footer-editor': editor2,\n\t// ...\n} );\n```\n\nCall `CKEditorInspector.detach( name )` to detach the inspector from an editor instance.\n\n**Tip**: `CKEditorInspector.attach()` returns the generated name of the editor if it was not provided.\n\n```js\n// Attach the inspector to two editor instances:\nconst generatedName = CKEditorInspector.attach( editor1 );\nCKEditorInspector.attach( { arbitraryName: editor2 } );\n\n// ...\n\n// Detach from the instances:\nCKEditorInspector.detach( generatedName );\nCKEditorInspector.detach( 'arbitraryName' );\n```\n\n### Attaching to all editor instances\n\nWhen 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.\n\n```js\n// Discover all editor instances in DOM and inspect them all.\nCKEditorInspector.attachToAll();\n```\n\nYou can also pass the optional [configuration object](#configuration) to this method.\n\n**Note**: This method works with CKEditor v12.3.0 or later. Earlier editor versions will not be discovered.\n\n### Toggling the inspector visibility\n\nClick the button in the upper-right corner of the inspector to quickly show or hide it. You can also use the \u003ckbd\u003eAlt\u003c/kbd\u003e+\u003ckbd\u003eF12\u003c/kbd\u003e (\u003ckbd\u003e⌥\u003c/kbd\u003e+\u003ckbd\u003eF12\u003c/kbd\u003e on Mac) keyboard shortcut.\n\n![The button that toggles the inspector visibility.](/sample/toggle.png)\n\n### Configuration\n\nYou can pass configuration options to `CKEditorInspector.attach()` and `CKEditorInspector.attachToAll()` methods as the last argument:\n\n```js\nCKEditorInspector.attach( editor, {\n\t// configuration options\n} );\n\nCKEditorInspector.attach( { 'editor-name': editor }, {\n\t// configuration options\n} );\n\nCKEditorInspector.attachToAll( {\n\t// configuration options\n} );\n```\n\n#### `isCollapsed`\n\nTo attach the inspector with a collapsed UI, use the `options.isCollapsed` option.\n\n**Note**: This option works when `CKEditorInspector.attach()` is called for the first time only.\n\n```js\nCKEditorInspector.attach( { 'editor-name': editor }, {\n\t// Attach the inspector to the \"editor\" but the UI will be collapsed.\n\tisCollapsed: true\n} );\n```\n\n## Development\n\nTo configure the environment:\n\n```console\ngit clone git@github.com:ckeditor/ckeditor5-inspector.git\ncd ckeditor5-inspector\nyarn install\n```\n\n### Working with the code\n\nStart the webpack file watcher:\n\n```console\nyarn dev\n```\n\nand open `http://path/to/ckeditor5-inspector/sample/inspector.html` in your web browser.\n\n### Building\n\nTo build the production version of the inspector, run:\n\n```console\nyarn build\n```\n\n### Testing\n\nTo run tests, execute:\n\n```console\nyarn test\n```\n\n## Releasing the package\n\nCircleCI automates the release process and can release both channels: stable (`X.Y.Z`) and pre-releases (`X.Y.Z-alpha.X`, etc.).\n\nBefore you start, you need to prepare the changelog entries.\n\n1. Make sure the `#master` branch is up-to-date: `git fetch \u0026\u0026 git checkout master \u0026\u0026 git pull`.\n1. Prepare a release branch: `git checkout -b release-[YYYYMMDD]` where `YYYYMMDD` is the current day.\n1. Generate the changelog entries: `yarn run changelog --branch release-[YYYYMMDD] [--from [GIT_TAG]]`.\n\t* By default, the changelog generator uses the latest published tag as a starting point for collecting commits to process.\n\n\t  The `--from` modifier option allows overriding the default behavior. It is required when preparing the changelog entries for the next stable release while the previous one was marked as a prerelease, e.g., `@alpha`.\n\n\t  **Example**: Let's assume that the `v5.0.0-alpha.0` tag is our latest and that we want to release it on a stable channel. The `--from` modifier should be equal to `--from v4.0.0`.\n\t* This task checks what changed in each package and bumps the version accordingly. It won't create a new changelog entry if nothing changes at all. If changes were irrelevant (e.g., only dependencies), it would make an \"_internal changes_\" entry.\n\t* Scan the logs printed by the tool to search for errors (incorrect changelog entries). Incorrect entries (e.g., ones without the type) should be addressed. You may need to create entries for them manually. This is done directly in CHANGELOG.md (in the root directory). Make sure to verify the proposed version after you modify the changelog.\n1. Commit all changes and prepare a new pull request targeting the `#master` branch.\n1. Ping the `@ckeditor/ckeditor-5-devops` team to review the pull request and trigger the release process.\n\n## License\n\nLicensed under a dual-license model, this software is available under:\n\n* the [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html),\n* or commercial license terms from CKSource Holding sp. z o.o.\n\nFor more information, see: [https://ckeditor.com/legal/ckeditor-licensing-options](https://ckeditor.com/legal/ckeditor-licensing-options).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckeditor%2Fckeditor5-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fckeditor%2Fckeditor5-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckeditor%2Fckeditor5-inspector/lists"}