CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得。

把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大小写)

在页面使用 CKEditor:

<textarea cols="80" id="prcontent" name="content" rows="50">hello world!</textarea>

<script type="text/javascript">

CKEDITOR.replace('content', { height: 200, width: 520 });

</script>

CKEditor 本身不自带上传功能,所以需要配合CKFinder才可以实现上传

第一步:网站需要引用CKFinder的dll(目录:/CKFinder/bin/Release/CKFinder.dll)

第二步:配置CKEditor的config.js (目录:/CKEditor/config.js ) 在CKEDITOR.editorConfig函数里加上,不需要的功能可以去掉

config.filebrowserBrowseUrl= '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹

config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹

config.filebrowserFlashBrowseUrl= '/ckfinder/ckfinder.html?Type=Flash';  //上传Flash时浏览服务文件夹

config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)

config.filebrowserImageUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)

config.filebrowserFlashUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)

配置完成后CKEditor 就带有上传功能了,但假如上传图片时,图片的文件是用原来图片的名字,想改为随机文件名呢,怎么办?接着看第三步。

第三步:修改CKFinder的源码。CKFinder自带有源码,目录:/CKFinde/_source

在VS里新建一个 现在的项目 指向CKFinde/_source/CKFinder.Net.sln

1) 打开/Settings/ConfigFile.cs文件

定位27行,添加一个属性:public bool RandomReName; //随机重命名

定位67行,给刚才的属性赋值:RandomReName = true; //默认值为true

保存关闭文件

2) 打开/Connector/Config.cs文件

定位62行,添加一个属性:

public bool RandomReName

{

get { return Settings.ConfigFile.Current.RandomReName; }

}

保存关闭文件

3) 打开/Connector/CommandHandlers/FileUploadCommandHandler.cs文件

定位64行,添加一句判断代码:

if ( Config.Current.RandomReName)  //使用随机名

sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension;

保存关闭文件
4) 重新生成项目,把/ckfinder/_source/bin/Debug/CKFinder.dll覆盖/ckfinder/bin/Release/CKFinder.dll或者网站项目去掉之前加入的引用再重新从CKFinder.Net项目里的Dll
最后一步:打开/ckfinder/config.ascx
定位42行,添加一属性:(其实这个加不加都可以的,因为之前有设置默认值,但使用原名时一定要设置为false)

//上传完毕后使用随机文件名

RandomReName = true;

保存关闭

好了,到此已经配置成功了,CKEditor 可以有上传功能了。其它的功能的设置,有空再继续研究~

还要提醒一句:CKEditor 和 CKFinder 文件夹里有很多不需要的东西,例如名字带有下划线前辍的,.net项目不需要php,asp的。

如果上传文件出现错误:因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.

需要修改config.ascx文件中

public override bool CheckAuthentication()
{
reture false;
}
修改为:

public override bool CheckAuthentication()
{

// 窗体验证时用
 return Request.IsAuthenticated;

//reture true; 不推荐使用
}

CKFinder 的使用准备工作
1. 下载CKFinder的Asp.NET版,将其解压到Web根目录下
2. 复制/bin/Release目录下的ckfinder.dll文件至站点bin目录
3. 精简目录:
_samples文件夹(示例文件,可以删除)
_source文件夹(源程序文件,可以删除)
CKFinder的配置
1. 打开 ” \ckfinder\config.ascx “,为SetConfig方法中的 BaseUrl 指定默认路径湘潭网站建设,如:
// 以userfiles 为默认路径,其目录下会自动生成images、flash等子目录。
BaseUrl = ” ~/ckfinder/userfiles/”;
// NOTE:注意“ ~/ ”。
2. 与CKEditor集成
打开CKEditor目录中的config.js文件在function 函数中
复制代码 代码如下:
// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
……
};
加入如下内容:
复制代码 代码如下:
// 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。
config.filebrowserBrowseUrl = location.hash + ‘/ckfinder/ckfinder.html’;
config.filebrowserImageBrowseUrl = location.hash + ‘/ckfinder/ckfinder.html?Type=Images’;
config.filebrowserFlashBrowseUrl = location.hash+’/ckfinder/ckfinder.html?Type=Flash’;
config.filebrowserUploadUrl = location.hash + ‘/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files’;
config.filebrowserImageUploadUrl = location.hash + ‘/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images’;
config.filebrowserFlashUploadUrl = location.hash + ‘/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash’;
// config.filebrowserWindowWidth = ’800′;
// config.filebrowserWindowHeight = ’500′;

CKFinder的应用
1. 在工具栏中添加站点根目录bin目录中的ckfinder.dll控件
2. 拖放控件到Web页面
3. 修改CKFinder控件属性BasePath为ckfinder目录的相对路径
常见问题
1. 症状:因为安全原因,文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
原因:未设置用户身份验证或者用户未登录。
语句:
复制代码 代码如下:
public override bool CheckAuthentication()
{
return false;
}

解决:在CKFinder的config.ascx文件中修改public override bool CheckAuthentication() 加入用户身份权限验证方法。
2. 症状:未知错误
原因:设置不进行用户身份验证,但是 BaseUrl 路径不对。
语句:
复制代码 代码如下:
public override bool CheckAuthentication()
{
return true ;
}

解决:在CKFinder的config.ascx文件中的public override void SetConfig() 修改

// 以userfiles 为默认路径,其目录下会自动生成images、flash等子目录。
BaseUrl = ” ~/ckfinder/userfiles/”;
// NOTE:注意“ ~/ ”。
3. 症状:访问带有CKFinder的页面时报错“HTTP 错误 404 – Not Found”
解决:修改CKFinder控件的BasePath属性为ckfinder目录的相对路径

.net_ckeditor+ckfinder的图片上传配置的更多相关文章

  1. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  2. CKEditor不借助CKFinder实现图片上传(.net版 ashx实现)

    参考博客:http://blog.csdn.net/mydwr/article/details/8669594 本人版本:4.4.6 打开文件:ckeditor/plugins/image/dialo ...

  3. ueditor图片上传配置

    ueditor图片上传配置文件为ueditor/php/config.json /* 上传图片配置项 */ "imageActionName": "uploadimage ...

  4. kindeditor在Java项目中的应用以及图片上传配置

    在官网下载Kindededitor的开发包   在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中 ...

  5. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

  6. PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

    一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...

  7. 关于UEditor的使用配置(图片上传配置)

    接到新需求,需要在平台上使用富文本编辑器,我这次选择了百度的UEditor 在官网上下载l.net版本的1.4.3开发版本 http://ueditor.baidu.com/website/downl ...

  8. uploadify图片上传配置

    参考:http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html 官网地址:http://www.uploadify.com/ ...

  9. ci 配置ckeditor + ckfinder 无图片上传按钮

    一:配置路径有问题 {$base_url}assets/js/editor/ckfinder/ckfinder.html  --> http://www.cnblogs.com/assets/j ...

随机推荐

  1. python numpy 介绍

    NumPy提供了两种基本的对象:ndarray(N-dimensional array object)和 ufunc(universal function object).ndarray(下文统一称之 ...

  2. PCB检查事项,生成钻孔表

    PCB检查事项 检查器件是否都放完, 检查连接线是否全部布完, 检查Dangling Line,Via, 查看铜皮是否孤立和无网络铜皮, 检查DRC, 1.选择菜单Display-Status,查看标 ...

  3. Zabbix3.0 自动电话报障

    第一种:Pagerduty 网站:www.pagerduty.com 优点:老牌服务商,稳定 缺点:贵,英文,网站要FQ 价格参考(34美元每月才25个电话,*29每月是包年才有的价格) 安装方式: ...

  4. MySQL表定义缓存

    表定义 MySQL的表包含表名,表空间.索引.列.约束等信息,这些表的元数据我们暂且称为表定义信息. 对于InnoDB来说,MySQL在server层和engine层都有表定义信息.server层的表 ...

  5. TypeScript 0.9.1 发布,新增 typeof 关键字

    TypeScript 0.9.1 发布了,该版本提升了编译器和语言的性能,增加新的语言特性 typeof ,更好的 this 处理等.详细介绍请看发行说明. TypeScript 是微软新推出的一种语 ...

  6. PyPy 2.1 正式版发布

    PyPy 2.1 Beta1 才刚刚在2天前发布,今天 PyPy 宣布 2.1 正式版发布. 值得关注的改进内容有: JIT support for ARM, architecture version ...

  7. C/C++文件操作2

    一.流式文件操作 这种方式的文件操作有一个重要的结构FILE,FILE在stdio.h中定义如下: typedef struct { int level; /* fill/empty level of ...

  8. Redis教程(七):Key操作命令详解

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/134.html?1455807040 一.概述: 在该系列的前几篇博客中, ...

  9. android mvvm初探

    目前google的databinding library还处在rc版,其中编译器发挥了主要作用.目前也只是在android studio开发环境中支持. mvvm能够大大降低模块间的耦合度,在开发过程 ...

  10. How to install ZeroMQ on Ubuntu14.04

    Prepare: sudo apt-get install libtool autoconf automake uuid-dev sudo apt-get install python-dev sud ...