使用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 編輯器創建優質的內容既簡單又有趣。本指南總結了必要的步驟和工具來開始使用該編輯器，設計和自定義文本編輯器，並集成該編輯器與服務器。同時，您可以通過添加插件或創建自定義微件等來擴展編輯器的功能，以滿足您的具體需求。