.net_ckeditor+ckfinder的图片上传配置
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的图片上传配置的更多相关文章
- asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试
1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...
- CKEditor不借助CKFinder实现图片上传(.net版 ashx实现)
参考博客:http://blog.csdn.net/mydwr/article/details/8669594 本人版本:4.4.6 打开文件:ckeditor/plugins/image/dialo ...
- ueditor图片上传配置
ueditor图片上传配置文件为ueditor/php/config.json /* 上传图片配置项 */ "imageActionName": "uploadimage ...
- kindeditor在Java项目中的应用以及图片上传配置
在官网下载Kindededitor的开发包 在项目中javaweb项目中导入kindeditor必须要使用的Jar包(用于文件上传,除非你的富文本编辑器不使用图片上传)jar包可以在官网的开发包中 ...
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
- PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能
一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...
- 关于UEditor的使用配置(图片上传配置)
接到新需求,需要在平台上使用富文本编辑器,我这次选择了百度的UEditor 在官网上下载l.net版本的1.4.3开发版本 http://ueditor.baidu.com/website/downl ...
- uploadify图片上传配置
参考:http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html 官网地址:http://www.uploadify.com/ ...
- ci 配置ckeditor + ckfinder 无图片上传按钮
一:配置路径有问题 {$base_url}assets/js/editor/ckfinder/ckfinder.html --> http://www.cnblogs.com/assets/j ...
随机推荐
- HTML编程
通俗的解释:HTML是一个没有穿衣服的人 CSS是穿上了华丽衣服的人 JS是使这个人动起来 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万 ...
- URAL - 1917 Titan Ruins: Deadly Accuracy(水题)
水题一个,代码挫了一下: 题意不好理解. 你去一个洞窟内探险,洞窟内有许多宝石,但都有魔法守护,你需要用魔法将它们打下来. 每个宝石都有自己的防御等级,当你的魔法超过它的防御等级时它就会被你打下来. ...
- hdu 4648 - Magic Pen 6(“水”题)
摘自题解: 题意转化一下就是: 给出一列数a[1]...a[n],求长度最长的一段连续的数,使得这些数的和能被M整除. 分析: 设这列数前i项和为s[i], 则一段连续的数的和 a[i]+a[i+1] ...
- 腾讯DBA官方博客开通了,欢迎交流
腾讯DBA官方博客开通了,欢迎交流哈..麻烦给放到首页一下 http://tencentdba.com 腾讯互娱游戏DBA团队一直致力于为游戏提供稳定.高效的DB运营服务,这是我们团队的使 ...
- C#设计模式(18)——中介者模式(Mediator Pattern)
一.引言 在现实生活中,有很多中介者模式的身影,例如QQ游戏平台,聊天室.QQ群和短信平台,这些都是中介者模式在现实生活中的应用,下面就具体分享下我对中介者模式的理解. 二. 中介者模式的介绍 2.1 ...
- KALI LINUX WEB 渗透测试视频教程—第十九课-METASPLOIT基础
原文链接:Kali Linux Web渗透测试视频教程—第十九课-metasploit基础 文/玄魂 目录 Kali Linux Web 渗透测试视频教程—第十九课-metasploit基础..... ...
- 倔强的网站数据抓取,关键时刻还需Webbrowser显身手
由于最近台风挺多,公司网站上需要挂上台风预报信息,就整了个抓取台风数据(至于抓数据的概念和实践手册我以前写的一篇博客里面有介绍:分享一套抓数据小程序,客户资料.实时新闻.股票数据…随心抓)的服务,做调 ...
- 实验七 状态机设计ADC0809采样控制电路
一.实验目的 学习用状态机实现A/D转换器ADC0809的采样控制电路. 二.实验内容 利用QuartusⅡ实现A/D转换器ADC0809的采样控制电路状态机设计:给出仿真波形.最后进行引脚锁定并进行 ...
- [jQuery学习系列五 ]5-Jquery学习五-表单验证
前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...
- Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践
Atitit. js mvc 总结(2)----angular 跟 Knockout o99 最佳实践 1. 框架 angular 跟Knockout 1 2. 2. 简单的列表绑定:Knockou ...