CKEditor上传图片—配置CKFinder

摘要:
第二种方法:打开config.js文件,加入下面一句话config.image_previewText='';//预览区域显示内容下面研究图片上传要想出现上传按钮,两种方法第一种:还是刚才那个image.js搜索“upload”可以找到这一段id:'Upload',hidden:true,而我使用的4.3的是id:"Upload",hidden:!

在网站开发中,如果有发布类似新闻的图文混排需求时,CKEditor不失为一个很好的选择,下载地址如下:

http://ckeditor.com/download

它的前身是FCKEditor,随着它的更新,上传图片的功能被分离出去了,现在如果需要实现上传图片,要么自己写代码,还有一种方法是使用CKFinder,下载地址如下:

http://ckfinder.com/download

下面详细描述一下使用它们的时候如何配置。

CKEditor我下载的是3.6.4,CKFinder下载的是2.3 for ASP.NET,首先解压所有的文件,然后将ckeditor和ckfinder文件夹放到网站的目录下,可以删除ckeditor和ckfinder文件夹下的_samples、_source 文件夹,将CKFinder.dll添加到站点的bin/文件夹中,然后在网站页面头部添加js的引用,具体路径根据自己放置的路径设置,如下:

<script src="../editor/ckeditor/ckeditor.js"type="text/javascript"></script>
<textarea name="individual"id="individual"runat="server"></textarea>
<script type="text/javascript">
    CKEDITOR.replace('individual');
</script>
CKEditor上传图片—配置CKFinder第1张
并且预览中有一堆火星文,可以修改相应配置删除它。
第一种方法:打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。(由于ckeditor的很多js文件都是压缩过的,格式很难看,很容易删错,所以不推荐此种方法)
第二种方法:打开config.js文件,加入下面一句话
config.image_previewText=' '; //预览区域显示内容
下面研究图片上传
要想出现上传按钮,两种方法
第一种:还是刚才那个image.js
搜索“upload”可以找到这一段 id:'Upload',hidden:true,而我使用的4.3的是
id:"Upload",hidden:!0,反正改为false就行了,(遗憾的是此种方法对我这个版本不起作用)
第二种:打开config.js文件,加入下面一句话
config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待会要上传的action或servlet
比如:
config.filebrowserImageUploadUrl = "/Home/Upload";
OK现在基本上是下面这个样子的了
CKEditor上传图片—配置CKFinder第2张
CKEditor上传图片—配置CKFinder第3张
上传图片的Action
        public ActionResult Upload(stringCKEditorFuncNum)
        {
           HttpPostedFileBase file=  Request.Files[0];
           string exstenname =Path.GetExtension(file.FileName);
           string direname = Server.MapPath("/Resource/upload/");
           if (!Directory.Exists(direname))
           {
               Directory.CreateDirectory(direname);
           }
           string filename = DateTime.Now.ToFileTime().ToString() +exstenname;
           file.SaveAs(direname +filename);
            string uploadpath = "/Resource/upload/" +filename;
            string result = @"<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction('" + CKEditorFuncNum + "','" + uploadpath + "','');</script>";
           Response.Write(result);
           return Content("ok");

免责声明:文章转载自《CKEditor上传图片—配置CKFinder》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇C语言,使用宏来传数字参数MFC画刷类CBrush使用实例 .下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

spring data jpa 原生查询(查一个json中的某一字段)

数据库: jpa 查询 java: 1 @Component("ediHistoryDAO") 2 public interface EdiHistoryDAO extends CrudRepository<EdiHistoryDO, Integer>{ 3 4 EdiHistoryDO findById(BigInteger id);...

C# 拼接字符串的几种方式和性能

开发过程中常用到的拼接字符串的方法有三种:   1 简单 “+=” 拼接法      1 2 3 4 5 string str="a";   str+="c"+"d";   string str_1="a"+"b";      首先需要明白的是string类型,string是引用类型,保留在堆上,而不是栈上,用的时候传的是内存中的地...

遇到double 数目过大,转String变成科学计数法

问题:   java中,当double数目过大,转出String时,变成了科学记数法的表示。 总结:   1.项目的存储用的是mysql,mysql的类型和java类型之间存在映射关系,以前关注不多。现在总结一下:    类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述             VARCHAR L+...

Flink--将表转换为DataStream或DataSet

A Table可以转换成a DataStream或DataSet。通过这种方式,可以在Table API或SQL查询的结果上运行自定义的DataStream或DataSet程序 将表转换为DataStream 有两种模式可以将 Table转换为DataStream: 1:Append Mode 将一个表附加到流上 2:Retract Mode 将表转换为流...

DELPHI 字符串分割处理

DELPHI 字符串分割处理 Code 1Function FindStr(BegSprStr,EdSpStr:String;var Source:String):String;  2var  3BegStr1Len,EdSpStr2Len,BegStr1Index,EdSpStr2index:integer;  4Temp:String;  5begi...

mini.DataGrid使用说明

mini.DataGrid表格。实现分页加载、自定义列、单元格渲染、行编辑器、锁定列、过滤行、汇总行等功能。Extendmini.PanelUsage <div url="../data/AjaxService.aspx?method=SearchEmployees" > <div property=...