CKEditor+CKFinder的圖片上傳配置

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; 不推薦使用
}