CKEditor上傳圖片—配置CKFinder

在網站開發中，如果有發布類似新聞的圖文混排需求時，CKEditor不失為一個很好的選擇，下載地址如下：

http://ckeditor.com/download

它的前身是FCKEditor，隨着它的更新，上傳圖片的功能被分離出去了，現在如果需要實現上傳圖片，要么自己寫代碼，還有一種方法是使用CKFinder，下載地址如下：

http://ckfinder.com/download

下面詳細描述一下使用它們的時候如何配置。

CKEditor我下載的是3.6.4，CKFinder下載的是2.3 for ASP.NET，首先解壓所有的文件，然后將ckeditor和ckfinder文件夾放到網站的目錄下，可以刪除ckeditor和ckfinder文件夾下的_samples、_source 文件夾，將CKFinder.dll添加到站點的bin/文件夾中，然后在網站頁面頭部添加js的引用，具體路徑根據自己放置的路徑設置，如下：

<script src="../editor/ckeditor/ckeditor.js" type="text/javascript"></script>

<textarea name="individual" id="individual" runat="server"></textarea>
<script type="text/javascript">
    CKEDITOR.replace('individual');
</script>

 

 

並且預覽中有一堆火星文，可以修改相應配置刪除它。

第一種方法：打開ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”，(b.config.image_previewText||'')單引號中的內容全刪了，注意別刪多了。(由於ckeditor的很多js文件都是壓縮過的，格式很難看，很容易刪錯，所以不推薦此種方法)

第二種方法：打開config.js文件，加入下面一句話

config.image_previewText=' '; //預覽區域顯示內容

下面研究圖片上傳

要想出現上傳按鈕，兩種方法

第一種：還是剛才那個image.js
搜索“upload”可以找到這一段 id:'Upload',hidden:true，而我使用的4.3的是

id:"Upload",hidden:!0，反正改為false就行了，(遺憾的是此種方法對我這個版本不起作用)

第二種：打開config.js文件，加入下面一句話

config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待會要上傳的action或servlet

 

比如:

config.filebrowserImageUploadUrl = "/Home/Upload";

OK現在基本上是下面這個樣子的了

 

上傳圖片的Action

        public ActionResult Upload(string CKEditorFuncNum)
        {
           HttpPostedFileBase file=  Request.Files[0];

           string exstenname = Path.GetExtension(file.FileName);

           string direname = Server.MapPath("/Resource/upload/");

           if (!Directory.Exists(direname))
           {
               Directory.CreateDirectory(direname);
           }

           string filename = DateTime.Now.ToFileTime().ToString() + exstenname;

           file.SaveAs(direname + filename);

            string uploadpath = "/Resource/upload/" + filename;

            string result = @"<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction('" + CKEditorFuncNum + "','" + uploadpath + "','');</script>";

           Response.Write(result);

           return Content("ok");