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. ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)

    CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...

  2. C# ckeditor+ckfinder的图片上传配置

    CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...

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

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

  4. 使用Ckeditor+Ckfinder完成图片上传

    在介绍CKEditor之前,首先要了解Fckeditor.FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器,具有轻量化,安装配置的特点,能够和PHP.JavaScript. ...

  5. Ueditor 图片上传配置

    (三) 下面这部分呢,来讲下编辑器的上传图片的功能,在官方文件中没有详细的介绍怎么配置上传图片的方法 1)在ueditor/jsp下的config.json文件中修改 "imageUrlPr ...

  6. 富文本编辑器CKEditor配置及图片上传配置

    一.ckeditor4的配 1.下载ckeditor4 进入官网https://ckeditor.com/ckeditor-4/download/可以直接点击下载,也可以下拉到 CKEditor 4 ...

  7. 4.CKeditor4.10.0最新图片上传配置

    CKeditor-4.10.0富文本编辑器,到上传图片的配置,网上的教程都不适合现在的版本. 第一步:在config.js的CKEDITOR.editorConfig = function( conf ...

  8. kindeditor4.1.10图片上传配置及使用说明

    1效果展示 1.1 点击图片上传按钮 1.2 弹出选择框,可以从已上传的图片中选择上传,也可以从本地上传. 1.3选择从图片空间上传,文件夹模式浏览所有已上传的图片 1.4从本地选择图片上传 1.5上 ...

  9. kindeditor图片上传配置水印

    先上效果图 网上有帖子说初始化了编辑器后就无法更改设置,其实是可以的.只不过不再是修改那些初始化参数了. <script>    KindEditor.ready(function (K) ...

最新文章

  1. ppt算是php的一种吗,ppt放映快捷键是什么
  2. 【php】php5.0以上,instanceof 用法
  3. MySQL——查询数据库、数据表总记录数
  4. 【转载 译自MarketWatch 】 华尔街疯人日记 (二十五)
  5. JEECG Framework 3.3.1 beta版本发布第一天战报(文档下载量破1300、...
  6. AgileConfig - 轻量级配置中心1.2.0发布,全新的UI
  7. UBUNTU修改控制台语言
  8. feign扫描_微服务实战SpringCloud之Feign简介及使用
  9. 按钮 加加加 减减减
  10. Android 蓝牙 自动配对连接
  11. (一)、apache doris 介绍
  12. 2018年第九届蓝桥杯大赛软件类省赛C/C++B组参赛感想
  13. Home Assistant 入门安装
  14. HDMI转MIPI CSI东芝转换芯片-TC358743XBG/TC358749XBG
  15. 一代王者回归?滴滴暂停563天,恢复新用户下载,江湖格局又生变
  16. unity导入FBX模型时出现材质丢失,模型为白膜的情况
  17. 打印万年历的c语言程序,C语言打印万年历
  18. Nature给学术界立规矩:ChatGPT等大模型不可以成为作者
  19. pdk7105的I2C配置
  20. OpenWrt编译扩展机制feeds

热门文章

  1. iOS开发-由浅至深学习block
  2. 2.2元组介绍+字符串操作
  3. 第106天:Ajax中同步请求和异步请求
  4. Java springMVC POI 导出 EXCEL
  5. Java与JS代码调试技巧
  6. 分享一个 markdown 编辑器 - Mditor
  7. 系统清理工具(Wise Care 365)绿色版
  8. [转]优秀编程的“艺术”
  9. Exchange 2013 OWA搜索邮件失败问题处理
  10. 使用面向 iOS 的本机插件扩展 PhoneGap