1.ckeditor默認沒有上傳圖片功能，只能通過Url顯示圖片，圖下圖

2.首先說明，ckeditor是有上傳功能的，只是隱藏了，需要通過配置讓它顯示

? ? 找到ckeditor/plugins/image/dialogs/image.js文件，搜索 id:"Upload" 把后面的hidden:!0改為hidden:false，然后就會顯示上傳頁，如下圖

?

3.光有上傳頁面也不能把圖片上傳到服務器，還需要設置一下上傳對應的Action(使用MVC)，可以在ckeditor/plugins/config.js里配置，本人配置文件如下

CKEDITOR.editorConfig = function( config ) {// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';config.language = 'zh-cn'; // 配置語言 config.width = 'auto'; // 寬度 config.height = '500px'; // 高度 config.font_names = '宋體/SimSun;新宋體/NSimSun;仿宋_GB2312/FangSong_GB2312;楷體_GB2312/KaiTi_GB2312;黑體/SimHei;微軟雅黑/Microsoft YaHei;' + config.font_names;config.image_previewText = ' '; //預覽區域顯示內容 config.filebrowserImageUploadUrl = "/Admin/Service/CKeditorUpload";//要上傳的action }; config.image_previewText = ' ';用來清除預覽圖區域一堆英文； config.filebrowserImageUploadUrl = "/Admin/Service/CKeditorUpload";用來設置要上傳圖片的action
4.在上傳圖片的Action中寫上傳圖片代碼，如下 [HttpPost]public ActionResult CKeditorUpload(HttpPostedFileBase upload){var fileName = Path.GetFileName(upload.FileName);var filePhysicalPath = Server.MapPath("~/upload/" + fileName);//我把它保存在網站根目錄的 upload 文件夾 upload.SaveAs(filePhysicalPath);var url = "/upload/" + FileName;var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];//上傳成功后，我們還需要通過以下的一個腳本把圖片返回到第一個tab選項return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");}

OK，可以上傳圖片到服務器了

轉載于:https://www.cnblogs.com/marshhu/p/7309449.html

總結

以上是生活随笔為你收集整理的ckeidtor编辑器添加图片上传功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。