CKEditor 生态系统文档
Search
Contribute to this guide
主页/CKEditor 5/入门

guide(旧版) 扩展功能

⚠️ 我们更改了安装方法，此旧版指南仅供用户参考。如果您正在寻找最新的 CKEditor 5 安装说明，请参阅最新版本的 配置功能 指南。

编辑器有许多现成的功能。但是，总有改进的空间！您可以利用编辑器及其插件公开的 API，并使用 插件接口 扩展编辑器，例如

// It can be a function:
function MyPlugin( editor ) {
    // Plugin code.
    // ...
}

// Or a class:
class MyPlugin {
    constructor( editor ) {
        // Constructor code.
        // ...
    }

    init() {
        // Initialization code.
        // ...
    }
}

// Added later to the plugins' list:
ClassicEditor.create( document.querySelector( '#editor' ), {
    // If you are using builds, this is going to be the "extraPlugins" property.
    plugins: [
        MyPlugin,
        // Other plugins.
        // ...
    ]
} );

此方法允许编写在编辑器初始化期间执行的简单 JavaScript 插件，并且不需要与其他插件模式或 UI 交互。要将新创建的插件添加到编辑器，您需要使用配置中的 config.plugins 属性（或 config.extraPlugins 用于预定义构建）。

无法用上面显示的简单插件完成所有操作。

简单插件功能

  • 响应主编辑器的事件。
  • 覆盖编辑器的转换机制。

标准插件功能

  • 添加新的 UI 元素（例如，在工具栏中添加一个新按钮）。
  • 创建小部件或新命令。
  • 依赖其他插件或命令的行为。

创建更多 高级插件 通常涉及使用 Plugin 等类或 UI 包，并且需要构建步骤。

焦点监听器可以是简单、无依赖插件的一个示例

function ReactOnFocusChange( editor ) {
    // Add a listener on the focus change.
    editor.editing.view.document.on(
        'change:isFocused',
        ( evt, data, isFocused ) => {
            if ( isFocused ) {
                // Implement your logic what should happen
                // when the editor is focused.
            }
        }
    );
}

// Load it as a plugin of the editor.
ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ReactOnFocusChange ], /* Or extraPlugins in predefined builds. */
        // More of the editor's configuration.
        // ...
    } )
    .catch( error => {
        console.log( error );
    } );