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结合解决方法：
<!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，还有ckeditor和ckfinder路径问题。