欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ueditor富文本编辑器--上传图片自定义上传操作

程序员文章站 2022-05-26 13:18:43
...

最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员。在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器,而Ueditor默认将上传图片上传到本地服务器,所以自己也是网上查了很多资料,最终解决了这个问题。 这里使用到的Ueditor版本为net版

对于Ueditor的配置使用,我就不多说了。这里只讲如何上传图片到远程服务器上
配置好Ueditor之后,打开ueditor/App_Code/ListFileHandler.cs
ueditor上传图片后都会调用到这里面的一个方法——Process(),进行文件上传保存到本地处理


public override void Process()
    {
        uploadImg();//我们直接在方法的最前面自定义一个方法,只让它执行自定义方法里的逻辑
        return;
        try
        {
            Start = String.IsNullOrEmpty(Request["start"]) ? 0 : Convert.ToInt32(Request["start"]);
            Size = String.IsNullOrEmpty(Request["size"]) ? Config.GetInt("imageManagerListSize") : Convert.ToInt32(Request["size"]);
        }
        catch (FormatException)
        {
            State = ResultState.InvalidParam;
            WriteResult();
            return;
        }
        var buildingList = new List<String>();
        try
        {
            var localPath = Server.MapPath(PathToList);
            buildingList.AddRange(Directory.GetFiles(localPath, "*", SearchOption.AllDirectories)
                .Where(x => SearchExtensions.Contains(Path.GetExtension(x).ToLower()))
                .Select(x => PathToList + x.Substring(localPath.Length).Replace("\\", "/")));
            Total = buildingList.Count;
            FileList = buildingList.OrderBy(x => x).Skip(Start).Take(Size).ToArray();
        }
        catch (UnauthorizedAccessException)
        {
            State = ResultState.AuthorizError;
        }
        catch (DirectoryNotFoundException)
        {
            State = ResultState.PathNotFound;
        }
        catch (IOException)
        {
            State = ResultState.IOError;
        }
        finally
        {
            WriteResult();
        }
    }
//这个自定义方法就可以写上我们自己要上传的服务器代码了
private void uploadImg()
{
    //此处执行上传到远程服务器的代码
}

上传图片成功后,编辑器会自动返回一个路径,这里我们需要修改ueditor的config.json文件
这里的imageUrlPrefix的配置我们该为“”,这样我们返回的字符串路径就不会加上什么前缀,导致图片路径错误

这个上传图片的操作,我们剪切图片复制粘贴到编辑器里,编辑器处理截图的操作也会调用这里的方法,通过这个方法将所截图上传到对应的服务器上

相关标签: ueditor