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

php

keditor的代碼全部重寫，但里面沒有了上傳功能，只是一個(gè)純粹的文件在線編輯器，如果需要上傳圖片，還需要下載ckfinder。

首先去官方上下載源代碼，然后分別解壓縮在網(wǎng)站根目錄里（默認(rèn)ckeditor和ckfinder文件夾里，一般不需要改動）

在所需要的頁面插入JS

<script type=”text/網(wǎng)頁特效” 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函數(shù)，返回改為ture（默認(rèn)為fasle）

這樣就能夠?qū)崿F(xiàn)上傳功能了。

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

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

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

fckeditor的上傳圖片中，有一個(gè)可以瀏覽服務(wù)器目錄的功能，如果在后臺，是可以開放使用的，如果是前臺用戶訪問就不要使用這個(gè)功能。
不過瀏覽圖片不是很方便，ckfinder 就很好的簡單了這個(gè)問題
fckeditor的配制如下:
修改文件：
fckeditoreditorfilemanagerconnectorsphpconfig.php

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

$Config

[

'Enabled'

]

 =

 true

 ;

//$Config['UserFilesPath'] 設(shè)置相對于根目錄的上傳目錄，目前來說沒有用，因?yàn)閷?shí)際上傳在下面的配制中

$Config

[

'UserFilesPath'

]

 =

 "/upload/"

;

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

$Config

[

'UserFilesAbsolutePath'

]

 =

 '/public/upload/'

 ;

設(shè)置ckfinder的config.php

$baseUrl

 =

 '/upload/'

;

// 在CheckAuthentication 改為return true,這里可以加入自己的權(quán)限判斷。

function

 CheckAuthentication(

)

{

 return

 true

;

}

程序代碼中使用

 $fckeditor

 =

 new

 FCKeditor(

$fckname

)

 ;

 $fckeditor

->

BasePath

 =

 '/js/fckeditor/'

 ;

//$toolbar_set 設(shè)置工具欄 默認(rèn)值: 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

(

)

 ;

下面為詳細(xì)的c#配置方法

CKEditor和CKFinder的最新版可以到官方網(wǎng)站（http://）上下載獲得。
把以上兩個(gè)資源放到網(wǎng)站的根目錄： /CKEditor 和 /CKFinder (不區(qū)分大小寫)
在頁面使用 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才可以實(shí)現(xiàn)上傳
第一步：網(wǎng)站需要引用CKFinder的dll（目錄：/CKFinder/bin/Release/CKFinder.dll）
第二步：配置CKEditor的config.js (目錄：/CKEditor/config.js ) 在CKEDITOR.editorConfig函數(shù)里加上，不需要的功能可以去掉
    config.filebrowserBrowseUrl= '/ckfinder/ckfinder.html'; //上傳文件時(shí)瀏覽服務(wù)文件夾
    config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?Type=Images'; //上傳圖片時(shí)瀏覽服務(wù)文件夾
    config.filebrowserFlashBrowseUrl= '/ckfinder/ckfinder.html?Type=Flash';  //上傳Flash時(shí)瀏覽服務(wù)文件夾
    config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上傳文件按鈕(標(biāo)簽)
    config.filebrowserImageUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上傳圖片按鈕(標(biāo)簽)
    config.filebrowserFlashUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上傳Flash按鈕(標(biāo)簽)
配置完成后CKEditor 就帶有上傳功能了，但假如上傳圖片時(shí)，圖片的文件是用原來圖片的名字，想改為隨機(jī)文件名呢，怎么辦？接著看第三步。
 
第三步：修改CKFinder的源碼。CKFinder自帶有源碼，目錄：/CKFinde/_source
在VS里新建一個(gè) 現(xiàn)在的項(xiàng)目 指向CKFinde/_source/CKFinder.Net.sln
1) 打開/Settings/ConfigFile.cs文件
定位27行，添加一個(gè)屬性：public bool RandomReName; //隨機(jī)重命名
定位67行，給剛才的屬性賦值：RandomReName = true; //默認(rèn)值為true
保存關(guān)閉文件
2) 打開/Connector/Config.cs文件
定位62行，添加一個(gè)屬性：
        public bool RandomReName
        {
            get { return Settings.ConfigFile.Current.RandomReName; }
        }
保存關(guān)閉文件
3) 打開/Connector/CommandHandlers/FileUploadCommandHandler.cs文件
定位64行，添加一句判斷代碼：
                        if ( Config.Current.RandomReName)  //使用隨機(jī)名
                            sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension;

保存關(guān)閉文件
4) 重新生成項(xiàng)目，把/ckfinder/_source/bin/Debug/CKFinder.dll覆蓋/ckfinder/bin/Release/CKFinder.dll或者網(wǎng)站項(xiàng)目去掉之前加入的引用再重新從CKFinder.Net項(xiàng)目里的Dll
最后一步：打開/ckfinder/config.ascx
定位42行，添加一屬性：（其實(shí)這個(gè)加不加都可以的，因?yàn)橹坝性O(shè)置默認(rèn)值，但使用原名時(shí)一定要設(shè)置為false）
        //上傳完畢后使用隨機(jī)文件名
        RandomReName = true;

保存關(guān)閉
好了，到此已經(jīng)配置成功了，CKEditor 可以有上傳功能了。其它的功能的設(shè)置，有空再繼續(xù)研究~
還要提醒一句：CKEditor 和 CKFinder 文件夾里有很多不需要的東西，例如名字帶有下劃線前輟的，.net項(xiàng)目不需要php,asp的。
如果上傳文件出現(xiàn)錯(cuò)誤：因?yàn)榘踩?，文件不可瀏覽. 請聯(lián)系系統(tǒng)管理員并檢查CKFinder配置文件.
需要修改config.ascx文件中
public override bool CheckAuthentication()
{
reture false;
}
修改為:
public override bool CheckAuthentication()
{
// 窗體驗(yàn)證時(shí)用
 return Request.IsAuthenticated;
//reture true; 不推薦使用
}