CKEditor 5 检查器

官方 CKEditor 5 检查器 提供了一组丰富的调试工具，用于检查编辑器内部结构，例如 模型、视图 和 命令.

它允许您观察编辑器中数据结构和选区的实时变化，这在开发新的富文本编辑器功能或理解现有功能时特别有用。

# 导入检查器

您可以将检查器作为 @ckeditor/ckeditor5-inspector 包导入到您的项目中

npm install --save-dev @ckeditor/ckeditor5-inspector

然后将其作为模块导入

import CKEditorInspector from '@ckeditor/ckeditor5-inspector';

或者作为普通 <script> 标签添加到应用程序 HTML 中

<script src="../node_modules/@ckeditor/ckeditor5-inspector/build/inspector.js"></script>

# 检查器作为书签

如果您不想导入检查器，可以创建一个书签，您可以在任何页面上打开它，而不会影响其源代码。

重要提示：如果页面启用了内容安全策略，则此方法将不起作用。

要创建这样的书签，请将以下代码粘贴为浏览器中新书签的 URL

javascript:(function(){let script=document.createElement('script');script.src='https://unpkg.com/@ckeditor/ckeditor5-inspector/build/inspector.js';script.onload=()=>CKEditorInspector.attachToAll();document.head.appendChild(script);})()

现在，您可以使用新创建的书签加载 CKEditor 5 检查器。

# 启用检查器

在使用 CKEditorInspector.attach() 方法 创建 时，将检查器附加到编辑器实例

ClassicEditor
    .create( /* ... */ )
    .then( editor => {
        CKEditorInspector.attach( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

检查器将显示在屏幕底部。

# 检查多个编辑器

您可以通过对每个编辑器实例调用 CKEditorInspector.attach() 来同时检查多个 CKEditor 5 实例。然后，您可以切换检查器上下文以检查不同的编辑器实例。

您可以在附加时指定编辑器名称，以方便处理多个实例

// Inspecting two editor instances at the same time.
CKEditorInspector.attach( { 'header-editor': editor } );
CKEditorInspector.attach( { 'body-editor': editor } );

编辑器切换器位于检查器面板的右上角。

# 演示

单击下面的 “检查编辑器” 按钮将检查器附加到编辑器

# 兼容性

检查器与 CKEditor 5 v12.0.0+ 兼容。

# 为检查器贡献代码

CKEditor 5 检查器的源代码及其问题跟踪器可在 GitHub 上获取，地址为 https://github.com/ckeditor/ckeditor5-inspector.