zoukankan      html  css  js  c++  java
  • 百度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);
        });
  • 相关阅读:
    Python--安装 pip 和 scapy
    windows设置代理
    麦子的《我奋斗了18年才和你坐在一起喝咖啡》
    Tar命令
    test
    markdown语法
    js apply call
    windows文件大小和占用空间为何不一样
    prolog笔记
    html文字超出显示省略号
  • 原文地址:https://www.cnblogs.com/xiaoyaodijun/p/4708073.html
Copyright © 2011-2022 走看看