在ThinkPHP5.0.11中使用 CKEditor、CKFinder
插件下载地址
CKEditor
CKFinder
配置步骤及常见问题说明
配置步骤
- 在页面中引入js,这里如果你使用了jquery 需要引入adapters/jquery.js
1
2
3
| <script src="/ckeditor/ckeditor.js"></script> //插件的位置 根据你的保存的路径设置
<script src="/ckeditor/adapters/jquery.js"></script>
<script src="/ckfinder/ckfinder.js"></script>
|
- 在页面中初始化CKEditor
1
2
3
4
5
| var myeditor=CKEDITOR.replace('content',{
filebrowserBrowseUrl: "/ckfinder/ckfinder.html",
filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?Type=Images',
filebrowserImageUploadUrl: '/plugins/ckfinder/core/connector/php/connector.php？command=QuickUpload&type=Images'
});
|
在未做如上配置之前,CKEditor 点击上传图片的图标是没有上传按钮的,网上有一些教程说是插件默认将这个按钮style设置为隐藏了,提供的解决办法是找到相应的位置修改css,其实只要配置了上传图片的处理文件路径,“ 上传 ”按钮就会显示出来。
- 整合CKEditor 和 CKFinder
CKEditor 只是一个富文本编辑器，没有文件浏览和文件上传的功能, CKFinder是用来上传文件和浏览服务器上的文件的，和CKEditor配合实现文件上传。
1
| CKFinder.setupCKEditor(myeditor,"/ckfinder/"); //ckfinder插件存放的相对路径
|
- 图片上传
首先在 ckfinder/config.php 中找到 $baseUrl = ‘/userfiles/‘ ,将其设置为你要保存上传文件的路径,你也可以动态设置地址。
再向下可以找到 $config[‘ResourceType’]为Images 的配置项，这里对上传图片的大小、扩展名进行配置。
常见问题
首先记得更改任何配置，如果没有效果要手动清除一下浏览器缓存,使用ctrl+F5也不能全部刷新,导致我花了一下午时间找问题，才发现其实已经配置好了。
- 隐藏 “浏览服务器文件按钮”
1
| 在 ckeditor/plugins/image/dialogs/image.js 找到仅有的一项 display:inline-block 将其设置为display:none;就可以隐藏掉了
|
- 缺少图像源文件地址
这是由于预览没有权限读取上传的文件的地址,更改浏览服务器文件的权限，只有用户登录后或当前用户只能查看自己上传到服务器的文件 ,在登录成功后设置一个授权字段到session中 ,不建议直接改为true,安全性较低。
1
2
3
4
5
6
7
| session_start();
if(isset($_SESSION['IsAuthorized'])&&$_SESSION['IsAuthorized']==true){
return true;
}else{
return false;
}
|
- 上传文件重名问题
ckfinder会按照原有的名字命名，中文的情况下可能会乱码，所以建议使用日期重命名。
1
2
3
4
5
6
7
| 打开/ckfinder/core/connector/php/php5/CommandHandler/FileUpload.php 找到
sUnsafeFileName=CKFinder_Connector_Utils_FileSystem::convertToFilesystemEncoding(CKFinder_Connector_Utils_Misc::mbBasename(uploadedFile['name']));
后面加上
sExtension = CKFinder_Connector_Utils_FileSystem::getExtension(sUnsafeFileName);
sUnsafeFileName=date('YmdHis').'.'.sExtension;
|
上传和图像对调位置
修改ckeditor/plugins/image/dialogs/image.js 文件。其实按钮的位置是按照以下方式排列的 ，所以只要将 uplaod部分的内容放在contents数组的第一个就好了。
1
2
3
4
5
6
| contents:[{
id:"info" ....,
id:"Upload" ....,
id:"Link" ....,
id:"advanced" ....,
}]
|
- 清空预览区文字
1
2
3
| 在ckeditor/config.js添加配置项
config.image_previewText=' '; //预览区域显示内容
|
- 去除掉不需要的选项卡
1
| config.removeDialogTabs = "image:advanced;image:Link;"; //去掉上传图片时超链接和高级按钮
|
- 获取内容，并判断是否为空
方法一：原生的方法
1
2
| editor 为初始化时创建的实例
editor.document.getBody().getText()
|
方法二：直接getData获取数据时如果使用了空格、回车，会添加p标签，将空格转义，导致获取的长度永远不会为空。
1
2
3
4
5
6
7
| var content = editor.getData();
content = content.replace(/( )+/g,"");
content = content.replace(/(<p><\/p>)+/g,"");
content = $.trim(content);
if(content==""){
...
}
|
- 自定义菜单栏 参见文档可配置的项
1
2
3
4
5
6
| // 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
config.toolbar = 'Basic';
config.toolbar = 'Full';
编辑ckeditor目录下的的config.js文件，默认的是下面的工具栏代码，
注意工具按钮是分组的，一个name内的大括号就是一个工具按钮分组，items后边是具体的按钮，“/”表示工具栏换行，“-”表示工具图标之间的中隔线“|”
|
