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

参考博客:http://blog.csdn.net/mydwr/article/details/8669594

本人版本:4.4.6

打开文件:ckeditor/plugins/image/dialogs/image.js

搜索内容:【c.config.image_previewText】,并删掉其后引号内的内容。

删除后格式:【c.config.image_previewText||""】。

与原文差异:原内容原文中是【b.config.image_previewText】,我这里是【c.config.image_previewText】,可能是版本不同的原因;原文中包括其后内容的包括号是单引号,我的版本是双引号,不影响使用。

修改影响:预览界面中杂乱的字符消失。

搜索内容:“upload”,并找到:【id:"Upload",hidden:!0】。

替换内容:将hidden的值改为0。

与原文差异:原文hidden后的值是true,我这里是非0。

修改影响:编辑器图片界面的上传按钮及选项卡出现。

打开文件:ckeditor/config.js文件

在配置的最后添加一条【config.filebrowserImageUploadUrl = "【ashx上传处理页面路径】";】

如果只是进行以上的设置的话,在图片上传完毕之后,会提示【缺少图像源文件地址】。

为了使其正常运行,则需要在图片上传成功的返回值中添加script将图片地址输入预览当中。

代码如下【注意将uploadImages/替换为图片存储的文件夹,modifiedName替换为上传后存储的文件名】:

1 context.Response.Write("<script type=\"text/javascript\">");
2 context.Response.Write("window.parent.CKEDITOR.tools.callFunction(" + callbackNumber + ",‘" + "uploadImages/" + modifiedName + "‘,‘‘)");
3 context.Response.Write("</script>");

一定要将context.Response.ContentType设置为"text/html",而不是默认的"text/plain",返回的值才会是html代码而不是不能运行的纯字符串。

ashx上传处理页面如下【我的处理比较繁琐,各位可自行简化】:

 1 public class UploaderHandler : IHttpHandler
 2 {
 3
 4     public void ProcessRequest(HttpContext context)
 5     {
 6         context.Response.ContentType = "text/html";
 7
 8         //对文件进行校验
 9         if (1 > context.Request.Files.Count)
10         {
11             ResponseWriteEnd(context, "<span style=‘color: red; font-size: 20px;‘>*请选择上传文件!</span>");
12             return;
13         }
14         else
15         {
16             HttpPostedFile _upfile = context.Request.Files[0];
17             string fileName = _upfile.FileName;
18             string fileType = fileName.Substring(fileName.LastIndexOf(".") + 1).ToLower();
19             int imgLength = _upfile.ContentLength;//获取文件的字节大小
20
21             if (!(fileType.Equals("jpg") || fileType.Equals("png") || fileType.Equals("bmp") || fileType.Equals("gif")))
22             {
23                 ResponseWriteEnd(context, "<span style=‘color: red; font-size: 20px;‘>*只能上传jpg/png/bmp/gif格式的图片!</span>"); //只能上传JPG格式图片
24                 return;
25             }
26             else
27             {
28                 if (imgLength > 5 * 1024 * 1024)
29                 {
30                     ResponseWriteEnd(context, "<span style=‘color: red; font-size: 20px;‘>*图片最大不能超过5M!</span>"); //图片不能大于5M
31                     return;
32                 }
33                 else
34                 {
35                     try
36                     {
37                         // 构造简单的防重复文件名
38                         string callbackNumber = context.Request.QueryString["CKEditorFuncNum"];
39                         string modifiedName = DateTime.Now.ToString("yyyy_MM_dd_hh_mm_ss_") + fileName;
40                         string savePathName = context.Server.MapPath("uploadImages/" + modifiedName);
41                         _upfile.SaveAs(savePathName);
42                         if (_upfile.InputStream != null)
43                         {
44                             _upfile.InputStream.Close();
45                         }
46                         // 上传结束后自动跳转到预览界面,并显示预览
47                         context.Response.Write("<script type=\"text/javascript\">");
48                         context.Response.Write("window.parent.CKEDITOR.tools.callFunction(" + callbackNumber + ",‘" + "uploadImages/" + modifiedName + "‘,‘‘)");
49                         context.Response.Write("</script>");
50                         ResponseWriteEnd(context, "<span style=‘font-size: 20px;‘>上传成功!</span>"); //上传成功
51                         return;
52                     }
53                     catch
54                     {
55                         ResponseWriteEnd(context, "<span style=‘color: red; font-size: 20px;‘>服务器内部错误!</span>");
56                         return;
57                     }
58                 }
59             }
60         }
61     }
62
63     public bool IsReusable
64     {
65         get
66         {
67             return false;
68         }
69     }
70
71     private void ResponseWriteEnd(HttpContext context, string message)
72     {
73         context.Response.Write(message);
74         context.Response.End();
75     }
76 }

时间: 2024-10-27 03:10:16

CKEditor不借助CKFinder实现图片上传(.net版 ashx实现)的相关文章

在JSP中使用ckeditor以及使用SpringMVC实现图片上传

最近在做个人博客,对于这个项目而言,文本编辑器的选择相对的比较重要,在百度UEditor.MarkDown等之中最终还是选择了 CKEDITOR,对于CKeditor的介绍自不必多说, 网上对于如何配置的文章虽然很多,但大多是千篇一律或是不完整,错误百出,对于ckeditor编辑器的前台配置可以按照官网上一步一步来,这里主要想总结一下上传图片该如何操作. 一.我用的是4.47版本 CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮 第一步:打开ckeditor/plugi

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

一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id="articlecontent" ><?php echo $request['content']; ?></textarea> <script type="text/javascript"> $('#articleconten

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

前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor,相信没几个Web程序员不知道的吧.不过,官方已经停止了该产品的更新,其最新版是2.6.6,于2010年2月15日发布. 取代FCKeditor的产品叫CKEditor(Content And Knowledge Editor),与其说是对FCKeditor的升级,不如说是全新的一个产品.相比FCK

h5图片上传简易版(FileReader+FormData+ajax)

一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口:file类型的input会有files属性,保存着文件的相关信息. 2. input.files是一个数组,由传入的file对象组成.每个file对象包含以下属性: lastModified:数值,表示最近一次修改时间的毫秒数: lastModifiedDate

vue + axios 实现图片上传 简单版

uploadImg(img) { // img => base64图片地址 let param = new FormData(); //创建form对象 param.append('multipartFile', this.dataURLtoBlob(img));// base64 转 二进制流 multipartFile => 后端要求的参数 this.$axios({ method: 'post', // post 方式 url: '/ss-minprogram/uploads', //

项目整合ckeditor实现图片上传到远程服务器

最近手头上的一个Java项目需要做一个门户网站,其中有一个模块就是用来发布最新的业界安全动态的模块,因此需要用到后台发布新闻的功能:刚开始的时候在网上搜了一下,大部分都是关于PHP和.NET的,关于Java不多,而且查到的都是说用ckeditor+ckfinder来实现,ckeditor实现文本的编辑,ckfinder实现图片的上传,刚开始我也是准备用ckeditor+ckfinder来实现的,但是后来研究ckfinder的时候不知道如何配置ckfinder的图片上传路径问题,网上可以找到好多例

jsp中如何整合CKEditor+CKFinder实现文件上传

最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人,不会在意这个.笔者使用的版本分别是:CKEditor3.5.3+CKFinder2.0.2,今天笔者整理了一下配置CKEditor和CKFinder的过程,以及需要注意的一些问题,希望对大家有所帮助. 第一:下载CKEditor和CKFinder相关的安装文件 1.在CKEditor官网http:

UMEditor(Ueditor mini)修改图片上传路径

UMEditor(Ueditor mini)修改图片上传路径 imageUp.ashx string pathbase = "/UpLoad/images/"; //保存文件夹在网站根目录下 dialogs/image/image.js //修改为 var $img = $("<img src='" + url + "' class='edui-image-pic' />"),//去掉editor.options.imagePath,

Drupal 7 配置ckeditor和ckfinder编辑器实现图片上传--不用wysisyg

注意: 1.这里的ckeditor编辑器是独立模块,不是那个wysiwyg模块. 2.这里的图片上传仅仅为文章内图片,非字段图片. 1.下载文件(1) http://drupal.org/project/ckeditor drupal的ckeditor模块(2) http://ckeditor.com/download CKeditor源码(3) http://ckfinder.com/download CKfinder(注意,不是免费的) 将ckedit文件夹放置在/sites/all/mod