npm 包 @oferraro/ckeditor5-build-classic 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，富文本编辑器是一个重要的工具。CKEditor 5 是当前最流行的富文本编辑器之一。本文将介绍如何使用 npm 包 @oferraro/ckeditor5-build-classic，快速地将 CKEditor 5 集成到你的项目中。

安装

首先，在项目中安装 npm 包 @oferraro/ckeditor5-build-classic：

npm install --save @oferraro/ckeditor5-build-classic

引入

然后，在需要使用 CKEditor 5 的文件中引入：

import ClassicEditor from '@oferraro/ckeditor5-build-classic';

使用

下面，我们将详细介绍如何使用 CKEditor 5 来创建一个富文本编辑器。

初始化编辑器

首先，我们需要为 CKEditor 5 创建一个容器，并初始化编辑器。可以使用以下示例代码：

<div id="editor"></div>

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

配置编辑器

CKEditor 5 的灵活性在于可以高度定制。你可以通过 API 配置编辑器来满足你的需求。例如，以下代码将使 CKEditor 5 禁用拼写检查：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        language: 'en',
        spellChecker: false
    } )

获取和设置文本

可以通过以下代码获取编辑器中的文本：

const editorData = editor.getData();

将文本设置到编辑器中的示例代码：

editor.setData( '<p>这是要设置的文本。</p>' );

自定义插件

你可以通过自定义插件扩展 CKEditor 5。以下示例代码将添加一个自己创建的插件：

import CustomPlugin from './myPlugin';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ CustomPlugin ]
    } )

事件监听

CKEditor 5 为用户互动提供了各种事件。例如，以下示例代码将在用户输入时提供提示：

editor.model.document.on( 'change:data', () => {
    console.log( '用户正在输入..' );
} );

总结

通过 npm 包 @oferraro/ckeditor5-build-classic，我们可以快速地将 CKEditor 5 集成到我们的项目中。本文介绍了如何基本使用 CKEditor 5 的各项功能。通过对 CKEditor 5 的灵活配置和自定义插件，我们可以定制一个适合我们项目需要的富文本编辑器。最后，在事件监听方面，CKEditor 5 也为我们提供了丰富的支持和扩展，使得我们可以轻松地进行互动提示等操作。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6006733f890c4f7277583622