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、将原来上传的代码改为如下

   //上传到又拍云
        //年月日加上文件的MD5值作为文件名
    文件名        设置         
        try
        {
        
            // 域名http://amayergogh.b0.upaiyun.com/
            UpYun upyun = new UpYun("amayergogh", "admin1", "adminheheda");

            /// 设置待上传文件的 Content-MD5 值（如又拍云服务端收到的文件MD5值与用户设置的不一致，将回报 406 Not Acceptable 错误）
            // upyun.setContentMD5(UpYun.md5_file(@"D:\"));
            upyun.setContentMD5(CommonHelper.CalcMD5(uploadFileBytes));
            bool uploadResult = upyun.writeFile(upYunFilePath, uploadFileBytes, true);
            if (uploadResult == true)
            {
                Result.Url = "又拍云地址    " + upYunFilePath;//返回给UEditor的插入编辑器的图片的src
                Result.State = UploadState.Success;
            }
            else
            {
                Result.State = UploadState.FileAccessError;
                Result.ErrorMessage = "上传到又拍云失败";
                logger.Error("上传文件失败");
            }
        }
        catch (Exception e)
        {
            Result.State = UploadState.FileAccessError;
            Result.ErrorMessage = e.Message;
            logger.Error("上传文件失败，发生异常：", e);
        }
        finally
        {
            WriteResult();
        }

七牛云的用法：

还是比较麻烦的

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

2、获取  Access Key 和 Secret Key。

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

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

  所以，改造PutFile

   public CallRet PutFile(string upToken, byte[] FileBytes, string key)
        {
        
            PutAuthClient client = new PutAuthClient(upToken);
            CallRet ret;
            using (Stream fs=new MemoryStream(FileBytes))
            {
                int block_cnt = block_count(fs.Length);
                long fsize = fs.Length;
                extra.Progresses = new BlkputRet[block_cnt];
                byte[] byteBuf = new byte[BLOCKSIZE];
                int readLen = BLOCKSIZE;
                for (int i = 0; i < block_cnt; i++)
                {
                    if (i == block_cnt - 1) { 
                        readLen = (int)(fsize - (long)i * BLOCKSIZE);
                    }
                    fs.Seek((long)i * BLOCKSIZE, SeekOrigin.Begin);
                    fs.Read(byteBuf, 0, readLen);
                    BlkputRet blkRet = ResumableBlockPut(client, byteBuf, i, readLen);
                    if (blkRet == null)
                    {
                        extra.OnNotifyErr(new PutNotifyErrorEvent(i, readLen, "Make Block Error"));
                    }
                    else
                    {
                        extra.OnNotify(new PutNotifyEvent(i, readLen, extra.Progresses[i]));
                    }
                }
                ret = Mkfile(client, key, fsize);
            }
            if (ret.OK)
            {
                if (PutFinished != null)
                {
                    PutFinished(this, ret);
                }
            }
            else
            {
                if (PutFailure != null)
                {
                    PutFailure(this, ret);
                }
            }
            return ret;
        }

上传方法

      Qiniu.Conf.Config.ACCESS_KEY = "";
        Qiniu.Conf.Config.SECRET_KEY = "";
        string bucketName = ""; //空间名
        PutPolicy put = new PutPolicy(bucketName, 3600);
        string uptoken = put.Token();
        Settings setting = new Settings();
        ResumablePutExtra extra = new ResumablePutExtra();
        ResumablePut client = new ResumablePut(setting, extra);
   
        //设置上传的文件的key值  文件名
        String key = 文件名
        //调用PutFile()方法上传

        try
        {
            CallRet callRet = client.PutFile(uptoken, uploadFileBytes, key);
            if (callRet.OK == true)
            {
                Result.Url = "http://o7clwdmua.bkt.clouddn.com/" + key;
                Result.State = UploadState.Success;
            }
            else
            {
                Result.ErrorMessage = "失败了";
            }
        }
        catch (Exception e)
        {
            Result.State = UploadState.FileAccessError;
            Result.ErrorMessage = e.Message;
            logger.Error("上传文件失败，发生异常：", e);
        }
        finally
        {
            WriteResult();
        }

总结：UEditor很强大