ckeditor5组件dom事件

除了文本DOM事件，CKEditor 5还提供了许多组件DOM事件，以便你可以监听并在编辑器组件更改时执行自定义操作。以下是一些常见的组件事件：

1. ready: 当编辑器组件准备好初始化时触发。
2. destroy: 当编辑器组件被销毁时触发。
3. enable: 当编辑器组件启用时触发。
4. disable: 当编辑器组件禁用时触发。
5. focus: 当编辑器组件获得焦点时触发。
6. blur: 当编辑器组件失去焦点时触发。

你可以使用这些事件之一来监听编辑器组件的更改，并执行相应的操作。例如，你可以监听 "focus" 事件，并在编辑器组件获得焦点时显示自定义工具栏。

相关问题

ckeditor5文本dom事件

CKEditor 5提供了许多文本DOM事件，以便你可以监听并在文本编辑器内容更改时执行自定义操作。以下是一些常见的事件：

1. input: 当用户在编辑器中输入时触发。
2. change: 当编辑器内容发生更改时触发。
3. blur: 当编辑器失去焦点时触发。
4. focus: 当编辑器获得焦点时触发。
5. paste: 当用户在编辑器中粘贴内容时触发。
6. keydown: 当用户按下键盘上的任何键时触发。

你可以使用这些事件之一来监听文本编辑器中的更改，并执行相应的操作。例如，你可以监听 "change" 事件，并在编辑器内容更改时更新页面上的计数器。

ckeditor5自定义plugin监听dom事件

要在 CKEditor 5 中为自定义插件添加 DOM 事件监听器，可以使用 `editor.editing.view.document.on()` 方法。

以下是一个示例插件，它在编辑器中添加一个自定义按钮，并为该按钮添加了一个点击事件监听器：

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

export default class MyPlugin extends Plugin {
    init() {
        const editor = this.editor;
        const t = editor.t;

        // 添加自定义按钮
        editor.ui.componentFactory.add( 'myButton', locale => {
            const button = new ButtonView( locale );

            button.set( {
                label: t( 'My Button' ),
                icon: '<my-icon></my-icon>',
                tooltip: true
            } );

            // 添加点击事件监听器
            button.on( 'execute', () => {
                console.log( 'My Button clicked' );
            } );

            return button;
        } );
    }
}

在上面的示例中，我们使用 `button.on()` 方法为按钮添加了一个 `execute` 事件监听器。当用户单击按钮时，将会在控制台中输出一条消息。

类似地，您可以使用 `editor.editing.view.document.on()` 方法为任何 DOM 元素添加事件监听器。例如，以下代码将为编辑器中的所有段落元素添加一个 `click` 事件监听器：

editor.editing.view.document.on( 'click', ( evt, data ) => {
    if ( data.domTarget.nodeName === 'P' ) {
        console.log( 'Paragraph clicked:', data.domTarget );
    }
} );