ckfinder + ckeditor 路径配置详解

最新推荐文章于 2021-02-13 03:44:34 发布

转载最新推荐文章于 2021-02-13 03:44:34 发布 · 1.8k 阅读

文章标签：

#ckfinder文件上传路径详解

CKFinder 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何将ckeditor与ckfinder进行集成，实现在线编辑器的文件上传与管理功能。主要内容包括配置文件路径、设置JS执行目录等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说明一下，我们要实现的功能是：
整合 ckeditor和ckfinder 在一起使用，实现编辑文章，并且可以上传附件，图片等功能，那么问题来了，ckeditor和ckfinder 只是一个开源框架，如果集成到我们的站点里，肯定要配置至少一个东西，那就是上传的附件存放在哪里？

1. 存放路径配置

所以第一个路径出来了，上传路径怎么配置：
找到 /WEB-INF/config.xml 文件，就是官方教程让你拷贝的那个配置文件，找到里面的:

<baseDir>D:/programing/apache-tomcat-7.0.65/webapps/userfiles/</baseDir>
<baseURL>http://localhost:8080/userfiles/</baseURL>

想来解释这两个路径：
baseDir 是文件存放的目录，而且是物理目录，真实文件存放的目录。这里我存放在： D盘下的/programing/apache-tomcat-7.0.65/webapps/userfiles/ 能看懂吧！

baseURL 是网页中我要访问已经上传上附件的路径的基本地址，所谓基本地址就是肯定后面还要加一长串东西才能访问，但是这一部分是由 ckeditor 完成的，所以我们只需要配置基本地址，然后ckeditor就可以做文件管理。
这里配置为： http://localhost:8080/userfiles/:
http://localhost:8080/ 表示你网站的根目录，这里不懂得自己看一下tomcat。因为我的tomcat是这样部署的：D:/programing/apache-tomcat-7.0.65/webapps/ 所以http://localhost:8080/userfiles/ 这个忘了地址相当于访问服务器上物理地址：D:/programing/apache-tomcat-7.0.65/webapps/ 应该解释清楚了吧！
还有一个要注意：配置baseDir 不能配置到服务器能访问的地址之外，这个也不难理解吧！如果你直接写一个D:\userfiles\，那肯定是不能访问的，文件安全嘛，tomcat只能访问它所管辖的目录，当然如果你配置了虚拟目录，那又不一样了！

2. js 执行目录

这里的js执行目录指的是： ckeditor 配置文件中，访问 ckfinder 链接目录。文件在： ckeditor/config.js 中，这个是我的 config.js 配置文件内容：

CKEDITOR.editorConfig = function( config ) {
    config.height = 600;
    config.toolbarCanCollapse = true;
    config.image_previewText=' ';
    config.filebrowserWindowWidth = '500';
    config.filebrowserWindowHeight = '500';

    // 注意这是填写的是绝对路径  /cvl/ckfinder/... 
    config.filebrowserBrowseUrl = '/cvl/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = '/cvl/ckfinder/ckfinder.html?type=Images';
    config.filebrowserFlashBrowseUrl = '/cvl/ckfinder/ckfinder.html?type=Flash';
    config.filebrowserUploadUrl = '/cvl/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = '/cvl/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = '/cvl/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
};

下面那一长串的： config.filebroweserBroweUrl, config.filebrowserImageBrowseUrl …
如果配置了这些目录，就可以在 ckeditor 编辑器中的插入图片和附件对话框中看到，浏览服务器按钮，和上传选项等。 so, 这里配置路径其实是比较简单的，配置成: /项目名/ckfinder/...就可以了，请一定注意配置绝对路径，因为相对路径不能满足所有请求的原来那个路径，以为你没办法确定你访问 ckfinder 时本来就有的路径。希望你能看懂我在说什么。哈哈哈！