cakephp中使用ckeditor+ckfinder实现在线编辑与文件上传.

关注

原创最新推荐文章于 2025-08-25 09:49:38 发布 952 阅读 AI 写同款· GEO 优化 ›

CKEditor批量上传图片和上传视频这个ckeditor的version为4.6.1,。主要是添加了拖拽上传图片个上传视频的功能，具体教程看博文：http://blog.csdn.net/u014044812/article/details/53897024 立即下载

1.首先要把这个插件引入到要使用到符文本编辑器的页面中:

<span style="font-size:18px;"><script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckfinder/ckfinder.js"></script></span>

在使用的位置使用textarea

<span style="font-size:18px;"><textarea rows="30" cols="50" name="data[content]">
</textarea>
<input type="submit" value="确定"></input>
</form>
<script type="text/javascript">CKEDITOR.replace('data[content]')</script></span>

2.这个时候就可以使用这个ckeditor是现在在线文本编辑了, 但是还不能使用.ckfinder实现文件上传的功能.配置ckeditor/config.js 在最下面加上:

    config.filebrowserBrowseUrl= '/js/ckfinder/ckfinder.html'; 
    config.filebrowserImageBrowseUrl= '/js/ckfinder/ckfinder.html?Type=Images'; 
    config.filebrowserFlashBrowseUrl= '/js/ckfinder/ckfinder.html?Type=Flash';  
    config.filebrowserUploadUrl = '/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; 
    config.filebrowserImageUploadUrl= '/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'; 
    config.filebrowserFlashUploadUrl= '/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

(这里要注意路径);

3.配置ckfinder/config.php 下面的CheckAuthentication()方法, 让他的返回值为true;

4.配置ckfinder/config.php下面的baseUrl=””,配置上传文件的路径!,

5.这个时候就基本可以实现突变上传的功能了, 但是还不是很完美, 因为, 这个ckfinder 的图片上传,是保留原来的文件名称来上传的, 这个时候我们需要修改ckfindder,找到FileUpload.php找到136行，也就是while(true)的下一行，添加如下：

<span style="font-size:18px;">$sFileName =  date('YmdHis').rand(100000,999999).'.'.$sExtension;  
$oRegistry->set("FileUpload_fileName", $sFileName);  </span>

(这里是一时间+随机6位数来给上传过来的文件命名的).

6继续优化以下, 打开这个图片上传的时候有一个预览的位置.

上面写了一些鸟语, 英文不好, 我也看不懂是啥玩意, 找到ckeditor/plugins/image/dialogs/image.js 搜索“c.config.image_previewText”就能找到这段了，(c.config.image_previewText||'')单引号中的内容全删了就可以了,