Thinphp 集成CKeditor以及CKfinder 踩坑经验（ckfinder预览图片失败）

(个人经验，仅供参考，错误之处，敬请谅解)

安装

从官网CKeditor CKfinder下载压缩包：

1. 不建议使用ckeditor5，功能少，只是引用简单方便。不可以配置，是一个打包编译好的js文件。当然如果会从github下载源项目从新打包编译，那也不需要官网的
2. editor4下载full-package,其他的肯定功能少，能不能配置不太清楚。
3. ckfinder肯定下载php版本，个人下的最新版，然后看了文档3.x应该都需要5.6以上的php
   下载后解压，将ckfinder放在ckeditor 下面，再将ckeditor放在项目public文件夹下。

配置

    配置问题，可以说一个挺严重的问题，个人找了很多教程（要么是旧的，要么是流水账，没有关键点，拿来用不了）结合官网文档（也是流水账，样例根本没什么参考的地方），研究了一天才得到最终的效果。
    CKeditor5 利用js文件加上create方法进行创建，很容易找到教程，这里不详述。
    CKeditor4也是利用js文件在页面中进行创建，需要使用replace代替节点（基本都是用textarea，不然没办法提交，div就算设置了name属性也没办法得到数据，个人亲测）。
    配置config，一是在页面中创建时就进行配置，二在config.js中进行配置，在创建时进行引用。
主要需要的配置项：

	let $baseUrl = 'public/ckeditor';
	//文件的上传管理：加载CKfinder  注意文件路径为网站根目录 使用时，注意ckfinder文件安装路径
    config.filebrowserBrowseUrl = baseUrl + 'ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = baseUrl + 'ckfinder/ckfinder.html?Type=Images';
    config.filebrowserFlashBrowseUrl = baseUrl + 'ckfinder/ckfinder.html?Type=Flash';
    config.filebrowserUploadUrl = baseUrl + 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = baseUrl + 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = baseUrl + 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

    这是ckeditor使用ckfinder的所需要的配置，当点击图片按钮，会进入ckfinder管理页面，这里路径不对无法进行上传。如果使用ckeditor自带的什么上传（修改源码的），略过。
其他editor的配置自行查找，都能用也有解释。

//验证是否具有上传权限，不用多说，可自行设置，个人在跳转就进行验证所以不需要，直接设为true
$config['authentication'] = function () {
    return true;
};
//上传配置项，在不同种类上传文件配置中都会用到
$config['backends'][] = array(
    'name'         => 'default',
    'adapter'      => 'local',
    'baseUrl'      => '/project_name/public/static/upload/',
 //   'root'         => '',
    'chmodFiles'   => 0777,
    'chmodFolders' => 0755,
    'filesystemEncoding' => 'UTF-8',
);
//上传图片的配置，同理也可以对文件上传进行配置，个人不需要所以没有设置
$config['resourceTypes'][] = array(
    'name'              => 'Images',
    'directory'         => 'images',
    'maxSize'           => 0,
    'allowedExtensions' => 'bmp,gif,jpeg,jpg,png',
    'deniedExtensions'  => '',
    'backend'           => 'default'
);

    还有就是文件名乱码问题，肯定是需要重置文件名（可以用日期也可以随机生成），自行查找。

踩的两大坑：
    editor是将所有的输入都变为html代码上传，所以在前台校验是否输入了内容，挺麻烦的，不管是回车还是空格都需要检验出来，个人也是找了无数人的博客，需要将editor中的数据替换掉所有p标签、br标签（可用可不用，因为回车是生成段落，没有br）、nbsp代码，最后再使用trim函数检验是否为空。
    baseUrl，这个路径设置，真的是。。。。在配置项中找到后，个人用了相对路径，绝对路径，使用变量连接，各种测试。最后找到了上传文件所在的地方：服务器根目录下的文件夹中。真的想不到，是在服务器根目录下新建文件夹上传。和项目半毛钱关系没有。再者，如上代码，project_name/public/static/upload之前一定要加/，不然还是找不到该文件，也就是预览失败，但是应该可以使用，因为路径没有错误，最后输出的内容应该可以引用。【如果不是为了预览效果，真想直接使用变量替换，因为最后输出调用还是可以调用文件，也不用设置项目名那么麻烦】