asp.net项目ckeditor+ckfinder实现图片上传
2012-10-25 09:48
766 查看
下面为详细的c#配置方法
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>
二、
还可以做成控件,放到工具箱:
1、右击一个选项卡点(选则项...)
2、点击(浏(览B)...)
3、找到你项目bin文件夹下的(CKEditor.NET.dll)确定就行
然后如果用到这个就可以直接拖拽到你的页面上,跟拖拽textbox或lable一样
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(这个我是在VS里的解决方案里面添加已有的项目打开的,打开的是CKFinder.Net.csproj然后按着下面的修改弄的)
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;(开始提示sExtension没定义什么的,后来查找了下sExtension,把这段代码放到有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; 不推荐使用
}
自己遇到的问题:缺少Design数据集,然后引用了一下,提示我好多重复的东西(经检查是因为在修改自定义文件名时,重复引用了ckfinder.dll,删掉了引用里面的ckfinder.dll可以了)
经实践这个教程可以用,有问题的朋友可以留言
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>
二、
还可以做成控件,放到工具箱:
1、右击一个选项卡点(选则项...)
2、点击(浏(览B)...)
3、找到你项目bin文件夹下的(CKEditor.NET.dll)确定就行
然后如果用到这个就可以直接拖拽到你的页面上,跟拖拽textbox或lable一样
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(这个我是在VS里的解决方案里面添加已有的项目打开的,打开的是CKFinder.Net.csproj然后按着下面的修改弄的)
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;(开始提示sExtension没定义什么的,后来查找了下sExtension,把这段代码放到有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; 不推荐使用
}
自己遇到的问题:缺少Design数据集,然后引用了一下,提示我好多重复的东西(经检查是因为在修改自定义文件名时,重复引用了ckfinder.dll,删掉了引用里面的ckfinder.dll可以了)
经实践这个教程可以用,有问题的朋友可以留言
相关文章推荐
- ASP.NET项目中使用CKEditor +CKFinder 实现上传图片
- ASP.NET项目中使用CKEditor +CKFinder 实现上传图片
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
- asp.net ckeditor 3.6.2 + ckfinder 2.1 上传图片
- ASP.NET下CKEditor3.6.4结合CKFinder2.3实现文本编辑器的上传功能
- CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php)
- 简单2步实现 asp.net mvc ckeditor 图片上传
- CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php)(转载)
- asp.net使用ckeditor与ckfinder的集成,有上传图片功能
- 在YII项目中使用ckeditor和ckfinder快速部署文本编辑器并实现图片上传
- ASP.NET(C#)实现一次性动态上传多张图片(多个文件)
- asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
- Asp.net图片上传实现预览效果的简单代码
- ASP.NET百度Ueditor编辑器实现上传图片添加水印效果
- asp.net+uploadify实现图片上传图片
- ASP.NET实现上传图片并生成缩略图的方法
- ASP.NET z中使用crop实现图片上传、剪裁和保存
- 基于asp.net实现图片在线上传并在线裁剪功能
- ASP.NET 5探险(3):使用UMEditor并实现图片上传
- vs2010 asp.net项目中集成ckeditor和ckfinder最简单图文教程