Ueditor自定义ftp上传

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

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

首先下一个ueditor的分发，官网http://ueditor.baidu.com/website/download.html;我选择我需要的.net utf8版本。文件目录大概是这样的。

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

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

@section Css

{

    <link rel="stylesheet" href="/ueditor/themes/iframe.css">

}



@section Scripts

{

    <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>

    <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>

    <script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script>



}

添加一个富文本在页面上

<script id="content" name="content" type="text/plain">

    载入你的初始数据

</script>

<script type="text/javascript">

    $(function() {

        var editor = new UE.ui.Editor();

        textarea: 'content'; //与textarea的name值保持一致  

        editor.render('content');

    })

</script>

如果调试一下就可以看到

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

打开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