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

來源:互聯網
上載者:User

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.