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.VEVb.com/LoveZhouRR/ExampleForUeditor.rar