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

最新推荐文章于 2019-05-20 11:29:22 发布

原创最新推荐文章于 2019-05-20 11:29:22 发布 · 915 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何将CKEditor文本编辑器与CKFinder文件管理器集成，以实现在线富文本编辑及文件上传功能。步骤包括引入插件、配置文件路径、修改上传文件名等。

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||'')单引号中的内容全删了就可以了,