Ckeditor與Ckfinder的配合使用，上傳圖片、浮水印、修改圖片名字為當前日期 asp.net

標籤：www   建立檔案夾   外觀   next   文本編輯   java   簡單   auth   extension   

      為了配置出來上傳功能，並且還添加浮水印，修改圖片的名字為日期，真的頭疼了很久，現在來分享一下自己所做的，也算一點小小的成就吧，順帶幫幫很多還在弄這個的猿們。我是分別用了兩種方法。先說低版本的Version 2.0, September 2011，昨天配置好了。先認識一下ckeditor跟ckfinder的區別吧，cke呢只要是文字編輯器，單不具備上傳的功能，所以有加了ckf，接下來詳細說明。

  1.  現在官網裡面下好對應的版本，把它添加到項目中，如下：

2.然後就去配置ckeditor的config.js的外觀，我這裡只有一下簡單的配置

3.建立一個頁面，叫做defalu.aspx，在這裡添加一個文字框，就是為了顯示文字編輯器用的

   <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Height="83px" Width="343px" />

連結了這三個js檔案，然後運行就會出現你想要的效果。

<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="ckfinder/ckfinder.js" type="text/javascript"></script>

4.現在點擊圖片上傳功能還不行，所以接著配置ckfinder裡的config.ascx檔案，

public override bool CheckAuthentication()
{

return true;   //如果有登入就在加判斷語句
}

5.現在上傳這個按鈕也能出來了，需要配置圖片上傳的路徑。如，我的圖片是儲存在ckfinder/userfiles裡面。

6.如果覺得圖片預覽區的英文單詞太多了，就去\postfile\ckeditor\plugins\image\dialogs\image.js裡面刪除b.config.image_previewText後單引號的英文，注意別刪多了，或者直接在config.js添加   config.image_previewText = ‘‘; //清空預覽地區顯示內容。

7.現在上傳已經可以啦，只是怎麼修改檔案名稱呢，為此我也找了很多源碼，後來發現了這一個，感謝博主的分享，連結貼下。http://www.cnblogs.com/juexin/archive/2012/10/25/2738235.html對著這個改了改，後來上傳圖片時自動以時間命名啦。

8. 浮水印是把config.ascx裡面的watermarker部分的注釋//給去掉，同時在watermarker檔案的bin檔案中找到watermarker.dll這個動態庫，添加引用就可以啦。如果沒有出現預設的ckfinder的那張浮水印圖，有可能是你檔案中沒有那張圖，或者是網站的目錄結構問題，我當時沒弄出來就是網站的目錄結構問題，還好當時有人幫忙看了，不然我這個才入門的也不會注意到那麼多。

 

現在是第二種方法，目前最高的版本，ckf3.3.1

項目布局結構圖如下，其他的都跟上面的相似，只是新版的沒有config.ascx，只好自己又寫了一個upload.ashx，現將這個一般處理常式代碼貼上，上傳的時候會自動擷取當前的時間命名。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CKEditor_demo.JS
{
/// <summary>
/// upload 的摘要說明
/// </summary>
public class upload : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
//擷取圖片
HttpPostedFile uploads = context.Request.Files["upload"];
string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
//擷取檔案名稱
//string file = System.IO.Path.GetFileName(uploads.FileName);
string file = System.IO.Path.GetExtension(uploads.FileName);
//目前時間
var now = DateTime.Now;
//隨機數
// Random ran = new Random();
// int RandKey = ran.Next(1000, 9999);
//圖片存放的大路徑
string path = string.Format("/upload/");
//圖片存放的伺服器本地路徑
string localPath = context.Server.MapPath(path);
//圖片存放的伺服器本地路徑 如果不存在 則建立檔案夾
if (!System.IO.Directory.Exists(localPath))
System.IO.Directory.CreateDirectory(localPath);
//圖片路徑
var PicPath = string.Format("{0}/{1}{2}", path, now.ToString("yyyyMMddhhmmss"),file);

//儲存圖片
uploads.SaveAs(context.Server.MapPath(PicPath));
//給編輯器返迴路徑
string url = PicPath.Replace("/", "/");
//輸出
context.Response.Write("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");
context.Response.End();
}

public bool IsReusable
{
get
{
return true;
}
}
}
}

當時新版本的應該是檔案缺失了，所以瀏覽伺服器的時候會出問題，其他的功能都OK！

       

然而瀏覽到伺服器就...

等新版本哪位大神配置出來後就多分享吧！每天進步一點點，時間長了就能看出變化~

 

Ckeditor與Ckfinder的配合使用，上傳圖片、浮水印、修改圖片名字為當前日期 asp.net