CKEditor5資源下載，這里我們選擇ckeditor5-build-classic下載：
https://ckeditor.com/ckeditor-5-builds/download/
ckfinder3選擇PHP版本下載：
https://ckeditor.com/ckeditor-4/download/#ckfinder
CKEditor5安裝前請注意，我發現IE11瀏覽器有可能是不支持CKEditor5的，調試瀏覽器最好是用最新版本的火狐。
CKEditor5快速安裝方法：
https://docs.ckeditor.com/ckeditor5/latest/builds/guides/quick-start.html#classic-editor
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CKEditor 5 - Classic editor</title> <script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script> </head> <body> <h1>Classic editor</h1> <textarea name="content" id="editor"> <p>This is some sample content.</p> </textarea> <script> ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } ); </script> </body> </html>
上邊的代碼保存example.html，放到網站根目錄下運行。
ClassicEditor is not defined
如果輯編器不出現，並且在console中有這個錯誤提示，證明你的瀏覽器不支持ckeditor5，請用最新版本的火狐。
沒有上述的問題，把<script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script>換成本地鏈接就好。
ckfinder安裝方法：
把ckfinder解壓后，放到網站根目錄下。
打開http://localhost/ckfinder/ckfinder.html
會出現如下提示：
The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file.
打開ckfinder/config.php
把false改成true，保存。
$config['authentication'] = function () { return true; };
再次訪問http://localhost/ckfinder/ckfinder.html
正常顯示，測試上傳圖片功能是否正常。
注意：上傳圖片不要帶中文漢字，全改成英文或數字，不然會造成亂碼，不能返回圖片。
更改上傳文件路徑
$config['backends'][] = array( 'name' => 'default', 'adapter' => 'local', 'baseUrl' => '/ckfinder/userfiles/', // 'root' => '', // Can be used to explicitly set the CKFinder user files directory. 'chmodFiles' => 0777, 'chmodFolders' => 0755, 'filesystemEncoding' => 'UTF-8', );
'baseUrl' => '/ckfinder/userfiles/'，這個自定義上傳圖片路徑，更改這里即可。
CKEditor5+ckfinder(php)結合解決方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CKEditor 5 - Classic editor</title> <script src="/ckeditor/ckeditor.js"></script> <script src="/ckeditor/translations/zh-cn.js"></script> </head> <body> <h1>Classic editor</h1> <textarea name="content" id="editor" rows="10"> <p>This is some sample content.</p> </textarea> <script type="text/javascript"> ClassicEditor .create( document.querySelector( '#editor' ), { //工具欄，可選擇添加或去除 //toolbar: ['headings', 'bold', 'italic', 'blockQuote', 'bulletedList', 'numberedList', 'link', 'ImageUpload', 'undo'], //editor加載中文簡體，默認是英文 language: 'zh-cn', ckfinder: { uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json' } } ) .catch( error => { console.error( error ); } ); </script> </body> </html>
CKEditor5，ckfinder減肥（可忽略）
由於下載的文件中帶有一些用不上的語言包和案例，為了減少空間，可以把這些文件刪除
CKEditor5刪除文件：
刪除\ckeditor\LICENSE.md
刪除\ckeditor\README.md
保留\ckeditor\translations下只留用得上的語言包，其他刪除。比如我，只留一個zh-cn.js
ckfinder刪除文件：
刪除\ckfinder\samples
刪除\ckfinder\userfiles //如果不更改上傳圖片路徑，這個保留不冊
刪除\ckfinder\CHANGELOG.html
刪除\ckfinder\ckfinder.html
刪除\ckfinder\LICENSE.html
刪除\ckfinder\README.html
刪除\ckfinder\lang下只留用得上的語言包，其他刪除。比如我，只留一個zh-cn.json
ckeditor5+ckfinder(php)整合下載，本人測試直接在網頁上下載是失敗的，請用迅雷，雖然慢點，但好歹也可以下載。
下載地址：https://files.cnblogs.com/files/iasnsqt/ckeditor-ckfinder.rar
總結：注意瀏覽器是否兼容ckeditor5，還有ckeditor和ckfinder路徑問題。