(个人经验,仅供参考,错误之处,敬请谅解)
安装
- 不建议使用ckeditor5,功能少,只是引用简单方便。不可以配置,是一个打包编译好的js文件。当然如果会从github下载源项目从新打包编译,那也不需要官网的
- editor4下载full-package,其他的肯定功能少,能不能配置不太清楚。
- 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之前一定要加/,不然还是找不到该文件,也就是预览失败,但是应该可以使用,因为路径没有错误,最后输出的内容应该可以引用。【如果不是为了预览效果,真想直接使用变量替换,因为最后输出调用还是可以调用文件,也不用设置项目名那么麻烦】