CKEditor5 + ckfinder3(php)
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路径问题。
简易代码
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ckeditor5编译器使用</title>
<script src="build/ckeditor.js"></script>
</head>
<body>
<h3>自定义菜单栏的ckeditor5编译器初始化</h3>
<div class="row cl">
<div class="formControls col-xs-6 col-sm-6">
<textarea name="subject" id="ckeditor1"></textarea>
</div>
</div>
<!--ckeditor5默认编辑器的高度-->
<style>
.ck-editor__editable {
min-height: 100px;
}
</style>
<script>
ClassicEditor.create( ckeditor1,{
toolbar: ['imageUpload','link'],
ckfinder: {
uploadUrl : '/admin/Upload/uploadImages?command=QuickUpload&type=Files&responseType=json'
//后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
}
}).then(
).catch()
</script>
<h3>默认菜单栏的ckeditor5编译器初始化</h3>
<div class="row cl">
<div class="formControls col-xs-6 col-sm-6">
<textarea name="description" id="ckeditor2"></textarea>
</div>
</div>
<script>
ClassicEditor.create( ckeditor2,{
ckfinder: {
uploadUrl : '/admin/Upload/uploadImages?command=QuickUpload&type=Files&responseType=json'
//后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
}
}).then(
).catch()
</script>
<!--/**
* 图片上传 written :yangxingyi 2018-06-06 15:35 (ps,这是tp5的上传图片写法,其他编辑器的按要求写即可)
*/
public function uploadImages($path=false,$save=false){
$file = request()->file('upload');
$path = $path?$path:ROOT_PATH . 'public/tmp/uploads/';
$save = $save?$save:SITE_URL.'/tmp/uploads/';
if($file){
$info = $file->move($path);
if($info){
$url = $save.$info->getSaveName();// 成功上传后 获取上传信息
}else{
//$error = $file->getError();
}
}
$url = str_replace("\\","/",$url);//把url的\换成/
return json(['uploaded'=>true,'url'=>$url]);
}-->
</body>
</html>
```
