UEditor使用浅析

UEditor富文本编辑器，百度的良心产品之一。

记录下我是怎么用UEditor的

1、引入到项目中，添加对net/bin下Newtonsoft.json的引用

2、实例化，按照demo中的index.html的形式。把ueditor.config.js和ueditor.all.min.js引过来

此时，应该可以加载出编辑器了

3、修改配置

　　按照文档中的说明，修改配置分为前台配置项和后台配置项

前台配置项：ueditor.config.js

后台配置项：config.json

成功配置后：

以上传图片为例，看图片上传是怎么实现的

首先，我想把图片上传到我网站的根目录下的 UpLoadFile文件夹下

在config.json中设置imagePathFormat 文件上传保存路径为 "/UpLoadFile/image/{yyyy}{mm}{dd}/{time}{rand:6}"

发现图片时不可以显示的，点击html源代码那个按钮，发现图片的src地址不对

在config.json中设置imageUrlPrefix 设置图片访问前缀

成功上传！

图片src路径

修改之后的

下面就仔细研究下上传是怎么实现的，经过仔细研究，有了初步的了解

在点击多图上传的时候，加载了dialogs/image下的image.html

在image.js中找到了上传图片的方法

无奈对js研究过少，看到这里就是完全懵逼的状态，但是可以勉强猜出大概干了啥事：加载配置里的上传路径及其他的上传配置。通过Developer Tools发现，请求路径是这样的：://localhost:16857/Content/ueditorKK/net/controller.ashx?action=uploadimage&encode=utf-8

在controller.ashx中做了这样的事情：

 Handler action = null;
 action = new UploadHandler(context, new UploadConfig()
                {
                    上传文件配置
                });
     action.Process();

UploadHandler继承自抽象类Handler

这时候，UploadHandler中的Process()就要执行了

  byte[] uploadFileBytes = null;
        string uploadFileName = null;

        if (UploadConfig.Base64)
        {
            uploadFileName = UploadConfig.Base64Filename;
            uploadFileBytes = Convert.FromBase64String(Request[UploadConfig.UploadFieldName]);
        }
        else
        {
            var file = Request.Files[UploadConfig.UploadFieldName];
            uploadFileName = file.FileName;

            if (!CheckFileType(uploadFileName))
            {
                Result.State = UploadState.TypeNotAllow;
                WriteResult();
                return;
            }
            if (!CheckFileSize(file.ContentLength))
            {
                Result.State = UploadState.SizeLimitExceed;
                WriteResult();
                return;
            }

            uploadFileBytes = new byte[file.ContentLength];
            try
            {
                file.InputStream.Read(uploadFileBytes, 0, file.ContentLength);
            }
            catch (Exception)
            {
                Result.State = UploadState.NetworkError;
                WriteResult();
            }
        }

上面的代码将获取上传文件的二进制形式，文件名

接下来就是获取上传路径，上传

返回这些东西：

"state":"SUCCESS",
"url":"/UpLoadFile/image/20160814/6360679021994094052976991.jpg",
"title":"psbM9XZV19O.jpg",
"original":"psbM9XZV19O.jpg",
"error":null

然后，图片就直接展示出来了

这就是UEditor上传图片的过程

接下来就是如何把图片上传到第三方云存储上

上面的代码已经得到了文件的二进制形式和文件名

又拍云的用法

1、引入UpYun.cs文件

2、将原来上传的代码改为如下

 1    //上传到又拍云
 2         //年月日加上文件的MD5值作为文件名
 3     文件名        设置         
 4         try
 5         {
 6         
 7             // 域名http://amayergogh.b0.upaiyun.com/
 8             UpYun upyun = new UpYun("amayergogh", "admin1", "adminheheda");
 9 
10             /// 设置待上传文件的 Content-MD5 值（如又拍云服务端收到的文件MD5值与用户设置的不一致，将回报 406 Not Acceptable 错误）
11             // upyun.setContentMD5(UpYun.md5_file(@"D:\"));
12             upyun.setContentMD5(CommonHelper.CalcMD5(uploadFileBytes));
13             bool uploadResult = upyun.writeFile(upYunFilePath, uploadFileBytes, true);
14             if (uploadResult == true)
15             {
16                 Result.Url = "又拍云地址    " + upYunFilePath;//返回给UEditor的插入编辑器的图片的src
17                 Result.State = UploadState.Success;
18             }
19             else
20             {
21                 Result.State = UploadState.FileAccessError;
22                 Result.ErrorMessage = "上传到又拍云失败";
23                 logger.Error("上传文件失败");
24             }
25         }
26         catch (Exception e)
27         {
28             Result.State = UploadState.FileAccessError;
29             Result.ErrorMessage = e.Message;
30             logger.Error("上传文件失败，发生异常：", e);
31         }
32         finally
33         {
34             WriteResult();
35         }

七牛云的用法：

还是比较麻烦的

1、引用SDK到项目中（好庞大），引用dll文件

2、获取 Access Key 和 Secret Key。

3、http://developer.qiniu.com/code/v6/sdk/csharp.html 官方文档上的文件上传方式是直接以文件的形式上传的

而我们这里想以流的方式上传

所以，改造PutFile

 1    public CallRet PutFile(string upToken, byte[] FileBytes, string key)
 2         {
 3         
 4             PutAuthClient client = new PutAuthClient(upToken);
 5             CallRet ret;
 6             using (Stream fs=new MemoryStream(FileBytes))
 7             {
 8                 int block_cnt = block_count(fs.Length);
 9                 long fsize = fs.Length;
10                 extra.Progresses = new BlkputRet[block_cnt];
11                 byte[] byteBuf = new byte[BLOCKSIZE];
12                 int readLen = BLOCKSIZE;
13                 for (int i = 0; i < block_cnt; i++)
14                 {
15                     if (i == block_cnt - 1) { 
16                         readLen = (int)(fsize - (long)i * BLOCKSIZE);
17                     }
18                     fs.Seek((long)i * BLOCKSIZE, SeekOrigin.Begin);
19                     fs.Read(byteBuf, 0, readLen);
20                     BlkputRet blkRet = ResumableBlockPut(client, byteBuf, i, readLen);
21                     if (blkRet == null)
22                     {
23                         extra.OnNotifyErr(new PutNotifyErrorEvent(i, readLen, "Make Block Error"));
24                     }
25                     else
26                     {
27                         extra.OnNotify(new PutNotifyEvent(i, readLen, extra.Progresses[i]));
28                     }
29                 }
30                 ret = Mkfile(client, key, fsize);
31             }
32             if (ret.OK)
33             {
34                 if (PutFinished != null)
35                 {
36                     PutFinished(this, ret);
37                 }
38             }
39             else
40             {
41                 if (PutFailure != null)
42                 {
43                     PutFailure(this, ret);
44                 }
45             }
46             return ret;
47         }

上传方法

 1       Qiniu.Conf.Config.ACCESS_KEY = "";
 2         Qiniu.Conf.Config.SECRET_KEY = "";
 3         string bucketName = ""; //空间名
 4         PutPolicy put = new PutPolicy(bucketName, 3600);
 5         string uptoken = put.Token();
 6         Settings setting = new Settings();
 7         ResumablePutExtra extra = new ResumablePutExtra();
 8         ResumablePut client = new ResumablePut(setting, extra);
 9    
10         //设置上传的文件的key值  文件名
11         String key = 文件名
12         //调用PutFile()方法上传
13 
14         try
15         {
16             CallRet callRet = client.PutFile(uptoken, uploadFileBytes, key);
17             if (callRet.OK == true)
18             {
19                 Result.Url = "http://o7clwdmua.bkt.clouddn.com/" + key;
20                 Result.State = UploadState.Success;
21             }
22             else
23             {
24                 Result.ErrorMessage = "失败了";
25             }
26         }
27         catch (Exception e)
28         {
29             Result.State = UploadState.FileAccessError;
30             Result.ErrorMessage = e.Message;
31             logger.Error("上传文件失败，发生异常：", e);
32         }
33         finally
34         {
35             WriteResult();
36         }

Amayer

总结：UEditor很强大