您的位置:

使用CKEditor 5编辑器创建优质内容的完整指南

一、为什么选择CKEditor 5

CKEditor 5 是一个强大的富文本编辑器,可以帮助你创建各种类型的内容,并有许多可定制的选项。

对比于其他编辑器,CKEditor 5 有以下优点:

1、易于集成:与各种框架和库集成无需繁琐的设置,可以轻松实现。

2、丰富的可定制选项:可以根据需要对文本编辑器进行定制和调整,如添加自定义按钮或菜单栏项。

3、跨浏览器兼容性:CKEditor 5 在主要的现代浏览器中工作正常,并按照最新的Web标准进行开发。

因此,CKEditor 5是一个非常棒的工具,可以帮助您将文本编辑的美学和功能提高到一个新的水平。

二、CKEditor Editor的基本使用

CKEditor 5可以快速创建各种类型的内容。下面介绍如何创建一个基本的文本编辑器:

<!-- 引入CKEditor 5 --> 
<script src="https://cdn.cke-cs.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>

<!-- 创建编辑器 -->
<textarea name="editor"></textarea>

<script>
    ClassicEditor
        .create( document.querySelector('textarea'))
        .catch( error => {
            console.error( error );
        } );
</script>

上面的代码将创建一个基本的CKEditor 5编辑器,并将其附加到id为"editor"的文本区域中。

三、自定义工具栏和按钮

CKEditor 5的一个很好的特性是它可以轻松地自定义编辑器的布局和功能。下面是一些步骤来自定义工具栏和按钮:

1、使用允许自定义的构建

CKEditor 5有两种构建类型:经典构建和基础构建。如果您需要自定义工具栏和按钮,则必须使用经典构建。创建一个自定义的CKEditor 5构建文件:

npx create-ckeditor5-app my-custom-build

cd my-custom-build

npm install

npm start 

2、添加自定义控件

您可以在工具栏上添加自定义按钮、下拉列表和许多其他控件。例如,下面的代码将添加一个名为“insertImage”的按钮,使用户可以插入图像:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'link',
                'bulletedList',
                'numberedList',
                'insertImage',
                'blockQuote',
                'undo',
                'redo'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:full',
                'imageStyle:side',
                '|',
                'imageTextAlternative'
            ]
        },
        language: 'en'
    } )
    .then( editor => {
        window.editor = editor;

        editor.model.document.on( 'change:data', () => {
            console.log( Array.from( editor.model.document.getChanges() ) );
        } );
    } )
    .catch( error => {
        console.error( error );
    } );

3、调整信息窗口

// 编辑器上方的信息窗口
<div class="ck-editor__top"> 

// 工具栏
<div class="ck-editor__toolbar">

// 工具栏项目
<div class="ck-toolbar">

// 项目容器
<div class="ck-tooltbar__item">

// 项目
<button class="ck-button ck-heading__button-level-1" title="H1">H1</button>

</div>
</div>
</div> 

四、集成CKEditor5和服务器保存

CKEditor 5 与服务器的相互作用是通过所谓的适配器完成的。它们负责将 CKEditor 5 接口和您的服务器端框架之间的差距抹平。

下面是如何与服务器集成的示例:

1、客户端上的配置:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        ckfinder: {
            // 配置CKFinder URL
            uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&responseType=json'
        },
        // 其他配置信息
    } )
    .catch( error => {
        console.error( error );
    } );

2、添加CKFinder服务器

CKFinder是一个用于文件管理和上传的独立库。要使用CKFinder,您需要添加以下代码:

<!-- 引入CKFinder配置文件 -->
<script src="/ckfinder/ckfinder.js"></script>

<!-- 配置CKFinder -->
<script>
    CKFinder.config( {
        // 配置参考文档 https://ckeditor.com/docs/ckfinder/
        // ...
    } );
</script>

3、处理文件上传

// CKFinder路径
$path = '/ckfinder/userfiles/images/';

// 获取上传文件的数据
$data = file_get_contents( 'php://input' );

// 保存文件
file_put_contents( realpath( '.' ) . $path . $fileName, $data );

// 返回文件的URL
echo json_encode( [ 'default' => $publicPath . $fileName ] );

添加上述代码,并使用您自己的后端技术将所需的服务器代码插入即可。

五、使用CKEditor 5插件扩展功能

CKEditor 5 有可能不会满足您的每个需求,但是,您可以通过添加插件来扩展对编辑器的支持。

下面让我们来看一下如何为CKEditor 5添加插件的示例:

// 在编辑器中添加插件
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Alignment ],
        toolbar: [ 'alignment:left', 'alignment:right' ]
    } )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

上述代码将添加Alignment插件到CKEditor 5,并通过工具栏添加对齐左/右的选项。

六、使用CKEditor 5创建自定义微件

CKEditor 5 运行时提供了一个内置的小部件系统,可用于支持自定义 UI 小部件。您可以根据自己的要求自己创建小部件。

下面是一个简单的在编辑器中添加自定义微件的示例:

// 注册自定义小部件
editor.ui.componentFactory.add( 'myPlugin', locale => {
    // 创建小部件
    const container = new ContainerElement();

    // 设置小部件的渲染模板
    // ...

    // 将该微件添加到工具栏中
    editor.ui.get( 'MyCustomPlugin' )
        .setChild( 'myPlugin', container );
} ); 

上述代码将添加一个名为"MyPlugin"的自定义微件,并将其附加到 CKEditor 5 的工具栏上。

七、结论

使用CKEditor 5 编辑器创建优质的内容既简单又有趣。本指南总结了必要的步骤和工具来开始使用该编辑器,设计和自定义文本编辑器,并集成该编辑器与服务器。同时,您可以通过添加插件或创建自定义微件等来扩展编辑器的功能,以满足您的具体需求。