asp.net mvc 中使用UEditor (百度富文本編輯器)

本人菜鳥程序員一個， 剛剛做了一個關於富文本框編輯的項目 ，記錄一下：

開發工具  visual studio  2019 或者 2012

開發語言 asp.net mvc 4(3,4,5都適用)

最終效果：

 

首先下載百度提供的開發包，我選擇的是asp.net 的，  如圖，  然後包含到你的asp.net mvc 項目裏面 ，  

 

然後自己做一個controller ，  先做一個簡單的index頁面用於顯示  textarea 富文本框

然後就可以接着在controller 裏面寫接收圖片和顯示圖片的方法了：例如：

   //接收圖片
        [HttpPost]
        public ActionResult UploadImage()
        {
            ImageUploadResult uploadRes = new ImageUploadResult();
            try
            {
                if( Request.Files.Count>0 )
                {
                    if( Request.Files.Count==1 )
                    {
                        HttpPostedFileBase file = Request.Files[0];
                        if (file.ContentLength > 0)
                        {
                            string lastname = Path.GetExtension(file.FileName);
                            string title = Guid.NewGuid().ToString()+lastname;
                            string path = "../App_Data/EditorImg/" + title;
                            path = System.Web.HttpContext.Current.Server.MapPath(path);
                            file.SaveAs(path);

                            uploadRes.state = "SUCCESS";
                            uploadRes.url = CurrentURL + "/Editor/ShowImage?imagetitle=" + title;
                            uploadRes.title = title;
                            uploadRes.original = file.FileName;
                            uploadRes.error = "";
                             
                        }
                    }
                    else
                    {
                        //多圖片上傳， 就自己研究研究吧
                    }
                }
            }
            catch(Exception ex)
            {
                uploadRes.state = "ERROR";
                uploadRes.error = ex.Message;
            }

            return Json(uploadRes);
        }

        //顯示圖片
        public ActionResult ShowImage(string imagetitle)
        {
            string rootPath = Server.MapPath("../App_Data/EditorImg/");
            string path = rootPath + imagetitle;
            byte[] img = System.IO.File.ReadAllBytes(path);
            return new FileContentResult(img, "application/octet-stream");
        }

這裏值得一提的是：UEditor 裏面圖片信息回傳的數據格式爲 json格式，我做了一個類 ， 類對象轉換爲json字符串即可。

 public class ImageUploadResult
    {
        /// <summary>
        /// 上傳狀態：SUCCESS 或在其他錯誤
        /// </summary>
        public string state { get; set; }
        
        /// <summary>
        /// 圖片地址 
        /// </summary>
        public string url { get; set; }
        
        /// <summary>
        /// 圖片標題
        /// </summary>
        public string title { get; set; }
        
        /// <summary>
        /// 圖片原標題
        /// </summary>
        public string original { get; set; }
        
        /// <summary>
        /// 錯誤內容
        /// </summary>
        public string error { get; set; }
    }

然後就到前端 修改  ueditor.config.js  裏面的上傳配置：

首先改serverURL

然後在  ueditor.config.js 裏面加入上傳圖片配置

      , "imageActionName": "UploadImage" /* 執行上傳圖片的action名稱 */
        ,"imageFieldName": "upfile" /* 提交的圖片表單名稱 */
        ,"imageMaxSize": 2048000 /* 上傳大小限制，單位B */
        ,"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"] /* 上傳圖片格式顯示 */
        ,"imageCompressEnable": true /* 是否壓縮圖片,默認是true */
        ,"imageCompressBorder": 1600 /* 圖片壓縮最長邊限制 */
        ,"imageInsertAlign": "none" /* 插入的圖片浮動方式 */
        ,"imageUrlPrefix": "" /* 圖片訪問路徑前綴 */
        ,"imagePathFormat": "" /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */

 

然後就可以開始調試了 ：

首次調試的時候 ，  你用谷歌f12 會發現，上傳圖片的時候會有提示  xxx/Editor/uploadImg?action=xxx 不正確 ，  

你慢慢調試會發現 爲何多了一個  ?action= 呢 

原因是官網的例子是  asp.net web form 的，以前的是用一般性處理文件 controller.ashx  ，所以就有一個action name ，  

換到了asp.net mvc 裏面，默認的路由就不需要  action name  ， 所以你要重載（或者是直接改寫） ueditor.all.js 裏面的 getActionUrl  

我是直接改掉action 拼接的字符串 ，簡單粗暴 ， 

我看網上也可以重載js  ， 如：   UE.Editor.prototype.getActionUrl = function(action) {xxxxx}  我就不寫了

 

改完後，重新刷新運行就可以了 。 

這個富文本編輯器ueditor 的功能還是很全很有用的。  

我等會把完整的例子代碼上傳

下載代碼

https://download.csdn.net/download/MFCdestoryer/12557811