zoukankan      html  css  js  c++  java
  • 百度文本编辑器 Ueditor for net 使用七牛存储附件的实现

    百度编辑器功能强大,确实好用,可惜附件使用本地存储,如果网站的用户量巨大,则会使得网站目录变得非常庞大,而且文件不易于管理,七牛云存储在附件存储方面下了不少功夫,用起来感觉不错,要是将ueditor 的附件存储改为七牛,那就解决大量帖子的附件存储问题了

    下载新版的 ueditor for net , 解压后直接将ueditor目录复制到mvc 项目目录的根目录下

    接下来查看 /ueditor/net/app_code/uploadHandler.cs,找到下面这段保存附件的代码

     try
            {
                if (!Directory.Exists(Path.GetDirectoryName(localPath)))
                {
                    Directory.CreateDirectory(Path.GetDirectoryName(localPath));
                }
                File.WriteAllBytes(localPath, uploadFileBytes);
                Result.Url = savePath;
                Result.State = UploadState.Success;
            }
            catch (Exception e)
            {
                Result.State = UploadState.FileAccessError;
                Result.ErrorMessage = e.Message;
            }
            finally
            {
                WriteResult();
            }
    

    在代码中,可以看到文件被保存在  localPath 中,好吧,开始修改

     try
            {
                if (!Directory.Exists(Path.GetDirectoryName(localPath)))
                {
                    Directory.CreateDirectory(Path.GetDirectoryName(localPath));
                }
                //File.WriteAllBytes(localPath, uploadFileBytes);
                //Result.Url = savePath;
               #region < -- 将服务器端文件上传至七牛 -- >
                OssService oss = new OssService();
                Attachment attc = new Attachment();
                FileInfo fi = new FileInfo(uploadFileName);
                attc.FileName = fi.Name;
                attc.FileExt = fi.Extension;
                attc.RelationId = RelationId;
                attc.UserName = OwnerName;
                attc.Uploaddate = DateTime.Now;
                attc.AttachmentType = AttachmentType.goods;
                oss.PutFileToQiniu(localPath, attc);
                #endregion
                Result.Url = attc.FileUrl;
                Result.State = UploadState.Success;
            }
            catch (Exception e)
            {
                Result.State = UploadState.FileAccessError;
                Result.ErrorMessage = e.Message;
            }
            finally
            {
                WriteResult();
            }    
    

      

    OssService 是我项目中一个七牛云存储的文件控制逻辑,具体代码懒得贴出来了,也就是引用七牛的.net 开发包,将文件从服务端保存到七牛云端,用过七牛的都知道怎么回事。Attachment 是我项目中的一个附件对象,处理逻辑已经包含在OssService中了。

    这里细心的朋友也许就会发现,代码中使用了OwnerName 和 RelationId  两个变量,这两个变量也就是当前网站用户的用户名,还有这个附件相关联的帖子 Id 了,可是在这里怎么得到呢?其实 ueditor 已经给出了扩展的方法,我这里简单提一下,你需要修改uploadHandler 的构造函数,如下

    public UploadHandler(HttpContext context, UploadConfig config)
            : base(context)
        {
            this.UploadConfig = config;
            RelationId = context.Request["RelationId"] != null ? context.Request["RelationId"].ToString() : "";
            OwnerName = context.Request["OwnerName"] != null ? context.Request["OwnerName"].ToString() : "";
            this.Result = new UploadResult() { State = UploadState.Unknown };
        }
    

     

    然后呢,修改ueditor 的初始化代码将这两个变量传进来

    <script id="container" name="content" type="text/plain">
                        @Html.Raw(Model.DescriptionDetail)
                    </script>
                    <!-- 配置文件 -->
                    <script type="text/javascript" charset="utf-8" src="~/ueditor/ueditor.config.js"></script>
                    <!-- 编辑器源码文件 -->
                    <script type="text/javascript" charset="utf-8" src="~/ueditor/ueditor.all.js"></script>
                    <!-- 实例化编辑器 -->
                    <script type="text/javascript">
                        var ue = UE.getEditor('container');
                        ue.ready(function(){
                            ue.execCommand('serverparam', {
                                'RelationId': '@Model.ShopId',
                                'OwnerName': '@User.Identity.Name'
                            });
                        });
                        
                    </script>

    其实ueditor 已经为我们做好了扩展的接口啦,初始化ueditor 时将这两个变量作为 serverparam 配置好就行了

    现在,基本已经可以正常工作了,暂时还是满意的,不过使用中发现如果在ueditor 中使用单个文件上传的功能,发现返回的url 不对,url为 "/ueditor/net/http://xxxx..." ,原来ueditor 自动为我们返回的图片url 添加了前缀,导致编辑时图片不正常,不过要解决这个很简单,直接找到 ueditor etconfig.json ,将imageUrlPrefix 从 "/ueditor/net/" 修改为 "" 就好了。

    现在上传文件是搞掂了,下来就是附件列表的问题了。修改 /ueditor/net/app_code/listHandler.cs ,找到这段代码

     1 try
     2         {
     3             var localPath = Server.MapPath(PathToList);
     4             buildingList.AddRange(Directory.GetFiles(localPath, "*", SearchOption.AllDirectories)
     5                 .Where(x => SearchExtensions.Contains(Path.GetExtension(x).ToLower()))
     6                 .Select(x => PathToList + x.Substring(localPath.Length).Replace("\", "/")));
     7             Total = buildingList.Count;
     8             FileList = buildingList.OrderBy(x => x).Skip(Start).Take(Size).ToArray();
     9             
    10         }
     1 try
     2         {
     3             //var localPath = Server.MapPath(PathToList);
     4             //buildingList.AddRange(Directory.GetFiles(localPath, "*", SearchOption.AllDirectories)
     5             //    .Where(x => SearchExtensions.Contains(Path.GetExtension(x).ToLower()))
     6             //    .Select(x => PathToList + x.Substring(localPath.Length).Replace("\", "/")));
     7             //Total = buildingList.Count;
     8             //FileList = buildingList.OrderBy(x => x).Skip(Start).Take(Size).ToArray();
     9             OssService oss = new OssService();
    10             Total = oss.GetShopFilesCount(SearchExtensions, RelationId);
    11             FileList = oss.GetShopFiles(SearchExtensions, RelationId, Start, Size).ToArray();
    12         }

    好了,一切ok ,目前用着还可以,唯一不爽的就是 ueditor 的上传附件管理窗口中竟然没有删除附件的功能,恶心,有时间再改吧

  • 相关阅读:
    Django对静态文件的处理——部署阶段
    使用Django来处理对于静态文件的请求
    Django1.7如何配置静态资源访问
    Spring WebSocket中403错误解决
    FastJSON JSONObject 字段排序 Feature.OrderedField
    国际化(i18n) 各国语言缩写
    【转】java.io.Closeable接口
    【转】spring bean 卸载
    This content should also be served over HTTPS
    Failed to close the ServletOutputStream connection cleanly, Broken pipe
  • 原文地址:https://www.cnblogs.com/iwaitu/p/3859001.html
Copyright © 2011-2022 走看看