百度editor调用【图片上传阿里云】

百度editor调用简单，但是图片和文件上传阿里云就有点难度了。下面我详细说一下。

百度富文本编辑器下载地址：http://ueditor.baidu.com/website/download.html  

根据语言来选择版本

 

 

   <script src="~/Scripts/ueditor/ueditor.config.js"></script>
    <script src="~/Scripts/ueditor/ueditor.all.js"></script>

      <script id="container" type="text/plain">

<script>
    var ue = new UE.ui.Editor({ initialFrameHeight: 400, serverUrl: "/Scripts/ueditor/net/controller.ashx?htmlid=Articles" });
    ue.render("container");

</script>

此时富文本编辑器已经可以用了，但是上传图片等一系列功能不可以使用

在UploadHandler.cs 类中的  public override void Process()方法中添加上传到阿里云的代码

public override void Process()
    {
        byte[] uploadFileBytes = null;
        string uploadFileName = null;
        HttpPostedFile file = null;
        if (UploadConfig.Base64)
        {
            uploadFileName = UploadConfig.Base64Filename;
            uploadFileBytes = Convert.FromBase64String(Request[UploadConfig.UploadFieldName]);
        }
        else
        {
             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();
            }
        }

        Result.OriginFileName = uploadFileName;

        var savePath = PathFormatter.Format(uploadFileName, UploadConfig.PathFormat);

        try
        {
            // 文件上传后的保存路径
            var extName = Path.GetExtension(Result.OriginFileName);
            if (string.IsNullOrWhiteSpace(extName))
            {
                return ;
            }
   

            var accessId = NeedHelp.ossKeyId;
            var accessKey = NeedHelp.ossKeySectet;
            var bucketName = NeedHelp.bucketName;
            //oss所在的地区
            var endpoint = "http://oss-cn-qingdao.aliyuncs.com ";
            var extenname = ".oss-cn-qingdao.aliyuncs.com/";
            var fileName = "essayimg/" + Result.OriginFileName;
            OssClient client = new OssClient(endpoint, accessId, accessKey);
            System.IO.Stream inputStream = new MemoryStream(uploadFileBytes);【

System.IO.Stream inputStream = file.inputStream; 这种方法不行，图片上传以后是个空的

】 
ObjectMetadata objectMetadata = new ObjectMetadata(); client.PutObject(bucketName, fileName, inputStream, objectMetadata); AccessControlList bucketAcl = client.GetBucketAcl(bucketName); var result = ((!bucketAcl.Grants.Any()) ? client.GeneratePresignedUri(bucketName, fileName, System.DateTime.Now.AddMinutes(5.0)).AbsoluteUri : string.Format("http://{0}{1}{2}", bucketName, extenname, fileName)); inputStream.Dispose(); Result.Url = result; Result.State = UploadState.Success; } catch (Exception e) { Result.State = UploadState.FileAccessError; Result.ErrorMessage = e.Message; } finally { WriteResult(); } }

到这是还有一个地方需要修改，不然返回发到富文本编辑器的路径有问题：如src="/editor/net/http://********",这样图片就无妨显示

这时休要修该config.json

把路径清空就好了

好了，如此就搞定了

关于editor的取值和赋值 

取值
    var ue1 = UE.getEditor('container');
    var content = ue1.getContent();

赋值

  ue.ready(function () {
        var con = $("#introduce").val();
        ue.setContent(con);
    });