·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> 百度文本编辑器 Ueditor for net 使用七牛存储附件的实现

百度文本编辑器 Ueditor for net 使用七牛存储附件的实现

作者:佚名      ASP.NET网站开发编辑:admin      更新时间:2022-07-23

百度文本编辑器 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\net\config.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 的上传附件管理窗口中竟然没有删除附件的功能,恶心,有时间再改吧