博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ueditor自定义ftp上传
阅读量:5898 次
发布时间:2019-06-19

本文共 2902 字,大约阅读时间需要 9 分钟。

web开发免不了需要富文本编辑,富文本编辑器接触过不少,ckeditor,kingeditor,选择Ueditor主要原因还是他是Mit协议的(赞一个)。

闲话少说,实现Ueditor的上传ftp功能其实是对Uedito文件上传的重定向。Ueditor有服务器本地村春功能,不过对于大多数网站来说让用户直接存文件图片到有限的服务器空间是很危险的,我这边选择FTP存储的方式。

首先下一个ueditor的分发,官网;我选择我需要的.net utf8版本。文件目录大概是这样的。

不像ckeditor,ueditor没有更多的语言包和example。这些东西放在合适的目录,这边放在站点路径下。

创建页面引用必要的js和css,这边官方号称css可以不用显示引用,但是实践发现报错了所以我还是引用上了。

@section Css{    
}@section Scripts{ }

添加一个富文本在页面上

如果调试一下就可以看到

工具栏按照需要可以选择,参照官方。

打开ueditor.config.js这里面找到image上传url,定位到文件就改它了fileUp.ashx,或者修改url到你的服务器处理url。简单修改下,模拟其返回的json,

public void ProcessRequest(HttpContext context)    {        if (!String.IsNullOrEmpty(context.Request.QueryString["fetch"]))        {            context.Response.AddHeader("Content-Type", "text/javascript;charset=utf-8");            context.Response.Write(String.Format("updateSavePath([{0}]);", String.Join(", ", Config.ImageSavePath.Select(x => "\"" + x + "\""))));            return;        }        context.Response.ContentType = "text/plain";        var state = "";        var URL = "";        var title = "";        var original = "";        try        {            var pic = context.Request.Files[0];            var ftp = new FtpSerivce();            var bytes = new byte[pic.ContentLength];            pic.InputStream.Read(bytes, 0, pic.ContentLength);            ftp.Create(bytes, pic.FileName);            URL = "localhsot:21/" + pic.FileName;            state = "Success";            title = pic.FileName;            original = pic.FileName;        }        catch (ArgumentException exception)        {            //            title = "Error";            original = exception.Message;            state = "\u4e0d\u5141\u8bb8\u7684\u6587\u4ef6\u7c7b\u578b";        }        catch (Exception e)        {            state = "\u672a\u77e5\u9519\u8bef";            URL = "";        }        finally        {            HttpContext.Current.Response.Write("{'url':'" +URL + "','title':'" + title + "','original':'" + original + "','state':'"+state+"'}");  //向浏览器返回数据json数据        }    }

这样ftp上传的功能就完成了,最后在修改下目录读取的方法imagemanager.ashx,把读取的目录修改为ftp目录,注意下分隔符和’/’

public void ProcessRequest(HttpContext context)    {        context.Response.ContentType = "text/plain";        string action = context.Server.HtmlEncode(context.Request["action"]);        if (action == "get")        {            String str = String.Empty;            //Ftp遍历            var ftp = new FtpSerivce();            var list = ftp.TraverseFilename();            var root = "http://localhost:80/ftp";            str = list.Aggregate(str, (current, filename) => current + (root + "/" + filename + "ue_separate_ue"));            context.Response.Write(str);        }    }

。另外修改下ueditor.config.js文件的管理图片修正地址。

最后调试下,我这边使用filezillar和apache作为单机测试的环境。至此完成目标对Ueditor图片ftp上传的修正。

 

Example地址:http://files.cnblogs.com/LoveZhouRR/ExampleForUeditor.rar

转载于:https://www.cnblogs.com/LoveZhouRR/p/3587136.html

你可能感兴趣的文章
Linux 进程中 Stop, Park, Freeze【转】
查看>>
PHP盛宴——经常使用函数集锦
查看>>
安装gulp及相关插件
查看>>
如何在Linux用chmod来修改所有子目录中的文件属性?
查看>>
Hyper-V 2016 系列教程30 机房温度远程监控方案
查看>>
笔记:认识.NET平台
查看>>
cocos2d中CCAnimation的使用(cocos2d 1.0以上版本)
查看>>
gitlab 完整部署实例
查看>>
SCCM 2016 配置管理系列(Part8)
查看>>
struts中的xwork源码下载地址
查看>>
我的友情链接
查看>>
PHP 程序员的技术成长规划
查看>>
python基础教程_学习笔记19:标准库:一些最爱——集合、堆和双端队列
查看>>
js replace,正则截取字符串内容
查看>>
javascript继承方式详解
查看>>
lnmp环境搭建
查看>>
自定义session扫描器精确控制session销毁时间--学习笔记
查看>>
仿射变换
查看>>
视频直播点播nginx-rtmp开发手册中文版
查看>>
PHP队列的实现
查看>>