CKEDITOR+CKFINDER的圖片上傳配置(C#/asp.net/php)

CKEDITOR+CKFINDER的圖片上傳配置(C#/asp教程.net/php教程)

php

keditor的代碼全部重寫，但裡面沒有了上傳功能，只是一個純粹的檔案線上編輯器，如果需要上傳圖片，還需要下載ckfinder。

首先去官方上下載原始碼，然後分別解壓縮在網站根目錄裡（預設ckeditor和ckfinder檔案夾裡，一般不需要改動）

在所需要的頁面插入JS

<script type=”text/網頁特效” src=”/ckeditor/ckeditor.JS”></script>

<script type=”text/javascript” src=”/ckfinder/ckfinder.js”> </script>

<form action=”Sroan.php” method=”post”>

<textarea  cols=”80″ id=”editor1″ name=”editor1″ rows=”10″></textarea>

<input type=”submit” value=”Submit” />

<script type=”text/javascript”>
var editor = CKEDITOR.replace(‘timu’);
CKFinder.SetupCKEditor(editor, ‘../ckfinder/’); //ckfinder總目錄的相對路徑.
</script>

再修改ckfinder/config.php 裡CheckAuthentication函數，返回改為ture（預設為fasle）

這樣就能夠實現上傳功能了。

如果上面的方法不行可以試一下

1. 下載安裝 CKEditor:
http://ckeditor.com/
解壓下載到的CKEditor放到網站的路徑中即可
2. 下載安裝 CKFinder:
http://ckfinder.com/download
解壓下載到的CKFinder放到與CKEditor同一目錄中即可
 
3. 在網頁中使用 CKEditor 和 CKFinder:
CKEditor 實際是替換一個 textarea 標籤，所以把textarea放到一個form中，當提交到php伺服器端，使用$_GET['xxx'] 或者 $_POST['xxx'] 取得編輯好的資料。注意，因為 CKEditor 要替換 textarea，所以相應的javascript 代碼"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的後面。
最簡單的方法，直接建立一個test.html檔案（和ckeditor、ckfinder處於同一級目錄）使用下面的例子修改一下即可。在瀏覽器裡瀏覽test.html就可以在網頁中看到 CKEditor 了，興奮吧。
 
 
 
 
   CKEditor
 
 
 
 
 
4. 配置CKFinder進行上傳圖片，Flash等。
 
到這裡，點擊 "Image" 按鈕，在彈出的視窗中的 "Upload" 標籤中已經看到上傳按鈕了，但是在上傳檔案時失敗。因為CKFinder還沒有配置好。需要建立上傳檔案的目錄和修改 ckfinder/config.php 裡的三個地方:
a. 建立儲存上傳檔案的目錄，如upload
（把upload檔案夾也放在和ckeditor、ckfinder處於同一級目錄，三個目錄都位於項目目錄下）
其路徑為 /upload/
[For Linux: 把其使用權限設定為php server可讀寫，最簡單的是 chmod 777 upload 這樣php server才有許可權往裡面儲存檔案.]
 
b. 找到設定檔（ckfinder/config.php）第32行，把 function CheckAuthentication () { return false; }
修改成 function CheckAuthentication() { return true; }
 
c. 找到第63行，把 $baseUrl 的值改成儲存上傳檔案存目錄的URL，
如 $baseUrl = '/項目名/upload/';（這裡的地址要從項目目錄開始的絕對路徑，確定上傳目錄已經存在）
 
d. 找到第82行，刪除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 為上傳檔案目錄的絕對路徑 ，（本地測試的時候要從磁碟的跟目錄下開始，即C:/或者D:/的直接目錄）
如$baseDir = '/Apache2/htdocs/ck/upload/'; （Apache2是D:/盤下的直接目錄）
這 是因為resolveUrl($baseUrl)函數不能正常工作。
 
至此，可以使用 CKEditor 和 CKFinder 上傳檔案了。
 
對上面這個小例子中伺服器端的b.php代碼：
 
 
header("Content-Type:text/html; charset=utf-8");
$str = $_POST['editor1'];
echo $str;
?>
 
可以看到，在點擊submit按鈕後，伺服器端收到了CKEditor中的內容，並使用echo輸出，產生一個與CKEditor裡面編輯的完全一樣的內容。在伺服器端可以把收到的內容儲存到資料庫教程中。然後再讀出在相應的頁面顯示出來。

---------------------------------------------------------------------------------------------------------

fckeditor的上傳圖片中，有一個可以瀏覽伺服器目錄的功能，如果在後台，是可以開放使用的，如果是前台使用者訪問就不要使用這個功能。
不過瀏覽圖片不是很方便，ckfinder 就很好的簡單了這個問題
fckeditor的配製如下:
修改檔案：
fckeditoreditorfilemanagerconnectorsphpconfig.php

// $Config['Enabled']改過true，允許上傳

 

$Config

[

'Enabled'

]

 =

 true

 ;

 

//$Config['UserFilesPath'] 設定相對於根目錄的上傳目錄，目前來說沒有用，因為實際上傳在下面的配製中

 

$Config

[

'UserFilesPath'

]

 =

 "/upload/"

;

 

//$Config['UserFilesAbsolutePath']  上傳的圖片位置,包括根目錄

 

$Config

[

'UserFilesAbsolutePath'

]

 =

 '/public/upload/'

 ;

 

 

 

設定ckfinder的config.php

$baseUrl

 =

 '/upload/'

;

 

// 在CheckAuthentication 改為return true,這裡可以加入自己的許可權判斷。

 

function

 CheckAuthentication(

)

 

{

 

 return

 true

;

 

}

程式碼中使用

 $fckeditor

 =

 new

 FCKeditor(

$fckname

)

 ;

 

 $fckeditor

->

BasePath

 =

 '/js/fckeditor/'

 ;

 

//$toolbar_set 設定工具列 預設值: Default

 

 $fckeditor

->

ToolbarSet

 =

 $toolbar_set

;

 

// $width 寬度

 

 $fckeditor

->

Width

     =

 $width

;

 

// $height 高度

 

 $fckeditor

->

Height

     =

 $height

;

 

//皮膚檔案的路徑

 

 $fckeditor

->

Config

      =

  array

(

'SkinPath'

=>

$SkinPath

)

;

 

 $fckeditor

->

Value

      =

 $value

;

 

//在fckedior這前使用CKFinder

 

 CKFinder::

SetupFCKeditor

(

 $fckeditor

,

 "/js/ckfinder/"

)

 ;

 

 $fckhtml

 =

 $fckeditor

->

Create

(

)

 ;

下面為詳細的c#配置方法

CKEditor和CKFinder的最新版可以到官方網站（http://cksource.com）上下載獲得。
把以上兩個資源放到網站的根目錄： /CKEditor 和 /CKFinder (不區分大小寫)
在頁面使用 CKEditor：
        <textarea cols="80" id="prcontent" name="content" rows="50">hello world!</textarea>
        <script type="text/javascript">
            CKEDITOR.replace('content', { height: 200, width: 520 });
        </script>
CKEditor 本身不內建上傳功能，所以需要配合CKFinder才可以實現上傳
第一步：網站需要引用CKFinder的dll（目錄：/CKFinder/bin/Release/CKFinder.dll）
第二步：配置CKEditor的config.js (目錄：/CKEditor/config.js ) 在CKEDITOR.editorConfig函數裡加上，不需要的功能可以去掉
    config.filebrowserBrowseUrl= '/ckfinder/ckfinder.html'; //上傳檔案時瀏覽服務檔案夾
    config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?Type=Images'; //上傳圖片時瀏覽服務檔案夾
    config.filebrowserFlashBrowseUrl= '/ckfinder/ckfinder.html?Type=Flash';  //上傳Flash時瀏覽服務檔案夾
    config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上傳檔案按鈕(標籤)
    config.filebrowserImageUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上傳圖片按鈕(標籤)
    config.filebrowserFlashUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上傳Flash按鈕(標籤)
配置完成後CKEditor 就帶有上傳功能了，但假如上傳圖片時，圖片的檔案是用原來圖片的名字，想改為隨機檔案名稱呢，怎麼辦？接著看第三步。
 
第三步：修改CKFinder的源碼。CKFinder內建有源碼，目錄：/CKFinde/_source
在VS裡建立一個 現在的項目 指向CKFinde/_source/CKFinder.Net.sln
1) 開啟/Settings/ConfigFile.cs檔案
定位27行，添加一個屬性：public bool RandomReName; //隨機重新命名
定位67行，給剛才的屬性賦值：RandomReName = true; //預設值為true
儲存關閉檔案
2) 開啟/Connector/Config.cs檔案
定位62行，添加一個屬性：
        public bool RandomReName
        {
            get { return Settings.ConfigFile.Current.RandomReName; }
        }
儲存關閉檔案
3) 開啟/Connector/CommandHandlers/FileUploadCommandHandler.cs檔案
定位64行，添加一句判斷代碼：
                        if ( Config.Current.RandomReName)  //使用隨機名
                            sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension;

儲存關閉檔案
4) 重建項目，把/ckfinder/_source/bin/Debug/CKFinder.dll覆蓋/ckfinder/bin/Release/CKFinder.dll或者網站項目去掉之前加入的引用再重新從CKFinder.Net項目裡的Dll
最後一步：開啟/ckfinder/config.ascx
定位42行，添加一屬性：（其實這個加不加都可以的，因為之前有設定預設值，但使用原名時一定要設定為false）
        //上傳完畢後使用隨機檔案名稱
        RandomReName = true;

儲存關閉
好了，到此已經配置成功了，CKEditor 可以有上傳功能了。其它的功能的設定，有空再繼續研究~
還要提醒一句：CKEditor 和 CKFinder 檔案夾裡有很多不需要的東西，例如名字帶有底線前輟的，.net項目不需要php,asp的。
如果上傳檔案出現錯誤：因為安全原因，檔案不可瀏覽. 請聯絡系統管理員並檢查CKFinder設定檔.
需要修改config.ascx檔案中
public override bool CheckAuthentication()
{
reture false;
}
修改為:
public override bool CheckAuthentication()
{
// 表單驗證時用
 return Request.IsAuthenticated;
//reture true; 不推薦使用
}