ckeditor与ckfinder组合配置

最新推荐文章于 2026-06-23 10:05:28 发布

转载最新推荐文章于 2026-06-23 10:05:28 发布 · 159 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/thinksasa/archive/2012/12/13/2816337.html

标签

#php #javascript #ViewUI

本文详细介绍如何在网页中集成ckeditor富文本编辑器，并通过ckfinder实现文件与图片的便捷上传功能。首先，通过引入ckeditor.js文件并在<textarea>元素中添加特定class实现编辑器的集成。其次，对ckeditor的配置文件进行修改，加入ckfinder的相关URL配置，同时调整ckfinder的配置以确保文件上传路径正确。整个过程无需引入额外js文件，操作简便。

一、ckeditor：

1.在需要添加编辑器的页面引出ckeditor.js文件：<script type="text/javascript" src="ckeditor/ckeditor.js"></script>；

2.替换<textarea>：<textarea name="body" class="ckeditor" id="addBody"></textarea>，即在里面添加：class="ckeditor"即可，不必replace什么的，太麻烦；

3.刷新该页面即可看到。

附加：下载的时候有两种选择，一种是CKEditor，即直接下载最简单版本；第二种是CKBuilder，即可配置相应的插件。

二、ckfinder：

　　1.不需要引入js文件，但是需要在ckeditor的配置文件进行ckfinder的配置；

2.在ckeditor/config.js里添加如下配置：

1     config.filebrowserBrowseUrl= '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
2     config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
3     config.filebrowserFlashBrowseUrl= '/ckfinder/ckfinder.html?Type=Flash';  //上传Flash时浏览服务文件夹
4     config.filebrowserUploadUrl = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';

　　 3.配置ckfinder/config.php：

　　　　（1）将低33行CheckAuthentication()函数的return false;改成return ture;（当然直接改会有安全问题）

（2）将第64行改为：$baseUrl = '/Uploads/imgs/';即图片上传的路径。

转载于:https://www.cnblogs.com/thinksasa/archive/2012/12/13/2816337.html