【CKEditor5 筆記】如何在CKEditor5中使用自定義圖片上傳功能

【CKEditor5 筆記】如何在CKEditor5中使用自定義圖片上傳功能

---

簡介

網絡上關於CKEditor5 富文本編輯器的相關中文資料還是太少，鑑於此我將結合官方文檔和自己使用經驗寫篇關於CKEditor5的筆記。

個人站點：https://www.quanquanting.com/ 歡迎訪問！

本篇筆記將簡單的介紹一下如何在CKEditor5中使用自定義圖片上傳功能。

在CKEditor5富文本編輯器中，插入圖片是一個非常普通且必要的功能。因此官方也提供了多種方法用於在編輯器中插入圖片。

• 從剪切板複製粘貼圖片
• 從文件夾拖動圖片文件
• 選擇編輯器自帶的上傳按鈕

其中最關鍵的就是插入圖片自動上傳到自己的服務器或是其他圖牀。根據官方的介紹，他們提供了四種上傳圖片的方法。

• Easy Image
• CKFinder
• Simple adapter
• Base64 adapter

當然還有可以自己根據官方的接口寫自己的上傳方法。這裏我將主要介紹如何寫自己的上傳方法實現圖片的上傳，至於官方的幾種上傳方法我就簡單的介紹一下吧。

Easy Image

Easy Image是CKEditor雲服務產品的一部分。 其目的就是爲了用戶上傳圖片，這種方式也是最爲簡單，便捷。如果使用這種方法根本不需要自己配置服務器。具體如何使用詳見：如何在項目中使用Easy Image

CKFinder

CKFinder 是一個基於瀏覽器的文件上傳器，如果整合CKFinder 和CKEditor5 就可以實現文件的上傳等功能。當然官方也提供了兩種集成的方式。具體使用詳見：如何在項目中集成CKFinder

Simple adapter

Simple adapter允許使用XMLHttpRequest API和最少的編輯器配置將圖像上載到服務器。具體使用詳見：如何在項目中使用Simple adapter

Base64 adapter

Base64上傳功能可將插入編輯器中的圖像轉換爲編輯器輸出中的Base64字符串。具體使用詳見：如何在項目中使用Base64編碼圖片

自定義上傳方法

使用自定義的上傳適配器，我們就可以完全控制將文件發送到服務器以及服務器響應整個流程。在CKEditor5 中任何上傳適配器都需要實現UploadAdapter接口才能正常工作，必須要帶有upload()和abort()這兩個方法。

代碼如下：

class MyUploadAdapter {
    constructor(loader) {
        // The file loader instance to use during the upload.
        this.loader = loader;
    }

    // Starts the upload process.
    upload() {
        return this.loader.file
            .then(file => new Promise((resolve, reject) => {
                this.uploadFile(file, resolve);
            }));
    }

    uploadFile(file, resolve) {
        // 上傳文件
        $.ajax({
            url: "XXXXXXXXX",
            type: 'POST',
            data: file,
            processData: false,
            beforeSend: function (request) {
                request.setRequestHeader("Content-Type", file.type);
            },
            success: function (respJson) {
                if (respJson.code == 0) {
                    resolve({
                        default: respJson.result[0].url
                    });
                } else {
                    alert("錯誤：" + respJson.msg)
                }
            },
            error: function (e) {
            }
        });
    }

    // Aborts the upload process.
    abort() {
        // Reject the promise returned from the upload() method.
        server.abortUpload();
    }
}

接下來就是定義FileRepository.createUploadAdapter()工廠方法，該方法使用MyUploadAdapter類在編輯器中啓用上傳適配器：

editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
    return new MyUploadAdapter( loader );
};

搞定！！！

總結

自己目前用的方法就是自定義的上傳適配器，親測可用，如果筆記中有誤，歡迎指正！

參考

[1] https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html