CKEditor 上傳圖片

消息排版,不外乎需要圖片的支援,CKEditor 也有此功能,但花了我一段時間去研究到底如何上傳成功,因此在此紀錄

CKEditor 圖片連結無法符合使用者的期望

要利用圖片排版對於使用者來說在平常不過,畢竟如果只有字是無法吸引消費者的,CKEditor 也有此功能,我們先來看看原先的圖片上傳長的樣子

我們可以看到有影像資訊、上傳、目標、進階

然後去看看這些頁籤包含的東西,除了上傳與影像資訊以幾乎對於使用者來說非常難使用,

最常使用的便是上傳,但上傳檔案至server必須自行撰寫code,因此該如何實現呢?

如何實現上傳圖片
 取消預設的字

在CKEditor 的config.js 加入 此行語句,將會把預設字清空 

CKEDITOR.editorConfig = function (config) {
   // 圖片資訊面板預覽區內容的文字內容,預設顯示CKEditor自帶的內容
   config.image_previewText = ' '; 
};
移除不需要的頁籤
CKEDITOR.editorConfig = function (config) {     
    config.removeDialogTabs = 'image:advanced;image:Link'; // 移除圖片上傳頁面的'高階','連結'頁籤
};
設定上傳路徑

 設定上傳路徑有兩種方式,一種我寫在MVC的controller 一種是 ashx

Config設定

請注意: config.filebowserUploadMethod 預設為 XMLHttpRequset ,當初因為沒有注意無論是controller 還是 ashx 皆無法收到值

ASHX 

  1. config.js 設定
    CKEDITOR.editorConfig = function (config) {
    
        // 圖片上傳相關
        config.filebrowserImageUploadUrl = 'UploadImg.ashx';   
        config.filebrowserUploadMethod = 'form';
    };
  2. UploadImg.ashx
    (1)  CKEditor 最主要要接收的參數為 CKEditorFuncNum 此是因為怕一個頁面有多個編輯器。
    (2) 為了防止filename重複,因此我們取得fileName以後將前面加入自訂的檔案名稱
    (3) 路徑的部分:請參考自行的資料夾路徑(我放在upload 資料夾下的 img裡面)
    (4) callFunction() 將我們上傳的url 回寫回 影像資訊的 URL 
    public void ProcessRequest (HttpContext context) {
            HttpPostedFile uploads = context.Request.Files["upload"];
            string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
            string file = System.IO.Path.GetFileName(uploads.FileName); ;
    
            var filename = DateTime.Now.ToString("yyyyMMdd_hhmmss") + file;
            var filePath = context.Server.MapPath(".") + "\\upload\\img\\" + filename;
            uploads.SaveAs(filePath);
    
            string imgUrl = "upload/img/" + filename;
            string message = "window.parent.CKEDITOR.tools.callFunction('" + CKEditorFuncNum + "', '" + imgUrl + "')";
            context.Response.Write("<script>" + message + " </script> ");
            context.Response.End();
    }
    

     

Controller

  1. config.js 設定
    CKEDITOR.editorConfig = function (config) {
        // 圖片上傳相關
        config.filebrowserImageUploadUrl = 'UploadImg';   
        config.filebrowserUploadMethod = 'form';
    };

     

  2.  contorller 設定
    (路徑的部分請自行修正)
            //CKEditorFuncNum,是ckeditor呼叫時自動把參數加在網址上傳(GET)過來的,
            //目的是識別最後要把圖片塞到哪個ckeditor
          
            [HttpPost]
            public ActionResult UploadImg( string CKEditorFuncNum, HttpPostedFileBase upload)
            {           
                string path = "";
                string message = "";
                if (upload != null)
                {
                    string filename = Path.GetFileName(upload.FileName);
                    if (upload.ContentLength > 0)
                    {
                        path = Path.Combine(Server.MapPath("~/upload/img"), filename);
                        upload.SaveAs(path);
    
                        string imgUrl = "/upload/img" + filename;
                        message = "window.parent.CKEDITOR.tools.callFunction('" + CKEditorFuncNum + "', '"+ imgUrl + "')";
                    }
                }
                else
                {
                    message = "上傳失敗";
                }
                return Content("<script>" + message + "</script>");
            }
    

    PS: 以上皆可以在前端用html 觀查你設定的路徑是否符合
     

CKEditor >> plugins>>image.js 修正

查詢uploadButton  將 hidden 設為 0 表 false;


參考資料:

  1. https://dotblogs.com.tw/malonestudyrecord/2018/08/10/160844
  2. https://blog.user.today/setting-ckeditor/
  3. http://blueweite.blogspot.com/2016/07/aspnet-ckeditor.html

下一篇: 使用拖拉/剪貼簿上傳圖片