|
@@ -5,21 +5,21 @@ order: 40
|
|
|
|
|
|
|
|
# Development tools
|
|
# Development tools
|
|
|
|
|
|
|
|
-In this guide you will learn about developer tools that will help you develop and debug editor plugins and features.
|
|
|
|
|
|
|
+In this guide you will learn about developer tools that will help you develop and debug CKEditor 5 plugins and features.
|
|
|
|
|
|
|
|
## CKEditor 5 inspector
|
|
## CKEditor 5 inspector
|
|
|
|
|
|
|
|
-The official [CKEditor 5 inspector](https://github.com/ckeditor/ckeditor5-inspector) provides rich debugging tools for editor internals like {@link framework/guides/architecture/editing-engine#model model}, {@link framework/guides/architecture/editing-engine#view view}, and {@link framework/guides/architecture/core-editor-architecture#commands commands}.
|
|
|
|
|
|
|
+The official [CKEditor 5 inspector](https://github.com/ckeditor/ckeditor5-inspector) provides rich debugging tools for editor internals like {@link framework/guides/architecture/editing-engine#model model}, {@link framework/guides/architecture/editing-engine#view view}, and {@link framework/guides/architecture/core-editor-architecture#commands commands}.
|
|
|
|
|
|
|
|
-It allows observing changes to the data structures and the selection live in the editor which is particularly helpful when developing new editor features or getting to understand the existing ones.
|
|
|
|
|
|
|
+It allows you to observe changes to the data structures and the selection live in the editor, which is particularly helpful when developing new rich-text editor features or getting to understand the existing ones.
|
|
|
|
|
|
|
|
-{@img assets/img/framework-development-tools-inspector.jpg Screenshot of a CKEditor 5 inspector attached to an editor instance.}
|
|
|
|
|
|
|
+{@img assets/img/framework-development-tools-inspector.jpg Screenshot of the CKEditor 5 inspector attached to a WYSIWYG editor instance.}
|
|
|
|
|
|
|
|
### Importing the inspector
|
|
### Importing the inspector
|
|
|
|
|
|
|
|
You can import the inspector as an [`@ckeditor/ckeditor5-inspector`](https://www.npmjs.com/package/@ckeditor/ckeditor5-inspector) package into your project:
|
|
You can import the inspector as an [`@ckeditor/ckeditor5-inspector`](https://www.npmjs.com/package/@ckeditor/ckeditor5-inspector) package into your project:
|
|
|
|
|
|
|
|
-```
|
|
|
|
|
|
|
+```bash
|
|
|
npm install --save-dev @ckeditor/ckeditor5-inspector
|
|
npm install --save-dev @ckeditor/ckeditor5-inspector
|
|
|
```
|
|
```
|
|
|
|
|
|
|
@@ -54,7 +54,7 @@ The inspector will show up at the bottom of the screen.
|
|
|
|
|
|
|
|
### Inspecting multiple editors
|
|
### Inspecting multiple editors
|
|
|
|
|
|
|
|
-You can inspect multiple editor instances at a time by calling `CKEditorInspector.attach()` for each one of them. Then you can switch the inspector context to inspect different editors.
|
|
|
|
|
|
|
+You can inspect multiple CKEditor 5 instances at a time by calling `CKEditorInspector.attach()` for each one of them. Then you can switch the inspector context to inspect different editor instances.
|
|
|
|
|
|
|
|
You can specify the name of the editor when attaching to make working with multiple instances easier:
|
|
You can specify the name of the editor when attaching to make working with multiple instances easier:
|
|
|
|
|
|
|
@@ -78,9 +78,9 @@ The source code of CKEditor 5 inspector and its issue tracker is available on Gi
|
|
|
|
|
|
|
|
## Testing helpers
|
|
## Testing helpers
|
|
|
|
|
|
|
|
-The `getData()` and `setData()` functions exposed by {@link module:engine/dev-utils/model model dev utils} and {@link module:engine/dev-utils/view view dev utils} are useful development helpers.
|
|
|
|
|
|
|
+The `getData()` and `setData()` functions exposed by {@link module:engine/dev-utils/model model developer utilities} and {@link module:engine/dev-utils/view view developer utilities} are useful development helpers.
|
|
|
|
|
|
|
|
-They allow "stringifying" {@link framework/guides/architecture/editing-engine#model model} and {@link framework/guides/architecture/editing-engine#view view} structures, selections, ranges, and positions as well as loading them from a string. They are often used when writing tests.
|
|
|
|
|
|
|
+They allow for "stringifying" the {@link framework/guides/architecture/editing-engine#model model} and {@link framework/guides/architecture/editing-engine#view view} structures, selections, ranges, and positions as well as for loading them from a string. They are often used when writing tests.
|
|
|
|
|
|
|
|
<info-box>
|
|
<info-box>
|
|
|
Both tools are designed for prototyping, debugging, and testing purposes. Do not use them in production-grade code.
|
|
Both tools are designed for prototyping, debugging, and testing purposes. Do not use them in production-grade code.
|