PHP中Ckeditor+Ckfinder配置圖片上傳功能

2024-09-04 11:44:43

字體：大中小

來源：轉載

供稿：網友

從標題來看我們知道Ckeditor不支持圖片上傳功能,它是需要一個組件Ckfinder才可以支持上傳圖片,本文章就來詳細的介紹了如何配置Ckeditor+Ckfinder實現圖片上傳的功能。

第一:安裝配置CKEditor

在擴展CKfinder實現圖片上傳之前,我們先把最基本的CKeditor編輯器安裝一下,將下載的ckeditor_3.4.2.zip解壓，復制目錄下的ckeditor文件夾至所需目錄，如/admin/。

(1)、安裝配置CKEditor，可改/admin/ckeditor/ckeditor.js來配置編輯器，如字體、背景色、語言、界面高寬、編輯器按鈕分布等,代碼如下:

config.language = 'en';

config.skin = 'v2';

config.uiColor = '#AADC6E';

config.toolbar = 'Basic';

….

(2)、官方的demo大多都喜歡用js配置editor區域,習慣寫php的我就嫌麻煩,只好看內置的php類,代碼如下:

require_once ROOTPATH . "ckeditor/ckeditor.php";

$CKEditor = new CKEditor();

$CKEditor->returnOutput = true; //設置輸出可用變量的情況

$CKEditor->basePath = '/ckeditor/';//設置路徑

$contentarea = $CKEditor->editor("content", $rs['contents']); //生成一個以name為content的

textarea

echo $contentarea;

頁面引用CKeditor,關鍵代碼如下

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<textarea cols="80" name="content" rows="10"></textarea>

第二步:我們來配置安裝CKfinder

CKfinder是官方組件，下載地址如下：http://ckfinder.com/download （注意：與ckeditor不是同一網站）。

(1),將下載的ckfinder_php_2.0.1.zip 解壓，復制目錄下的ckfinder文件夾至編輯器目錄，/admin/ckeditor。

(2),需要上傳了,只好加入ckfinder,把ckfinder和ckeditor放在同級目錄下。

打開/ckfinder/config.php,首先設置第一個函數CheckAuthentication(),這個函數需要按照自己的規則寫,只要return,true的情況才能允許上傳文件到服務器的,當然不建議直接寫return true,這將導致安全問題,可以采用session來處理比較方便。

我們可以簡單的把子config.php這樣修改,代碼如下:

function CheckAuthentication()

{

return false;//改為return false

}

或者更安全的做法利用 session,代碼如下:

session_start();

function CheckAuthentication(){

    if(isset($_SESSION['UseEidtor']))

        return true;

    else

         return  false;

}

找到”$baseUrl”,這個變量定義了ckfinder文件上傳的目錄，將值設為”$baseurl='../data /',文件上傳后程序他會在此目錄下自動建立相應的文件夾如image、flash等。

第三步：整合,實現圖片上傳功能

1．在編輯器頁面頭部引用ckfinder.js文件,代碼如下：

下面介紹調用方法,最后就是使用ckfinder,代碼如下:

require_once ROOTPATH . "ckeditor/ckeditor.php";

    require_once ROOTPATH . 'ckfinder/ckfinder.php' ;



     $CKEditor  = new  CKEditor();

    $CKEditor->returnOutput = true;

    $CKEditor->basePath = '/ckeditor/';

    CKFinder::SetupCKEditor($CKEditor, '/ckfinder/') ;//注意這里是相對路徑，相對于根目錄，

不能用絕對路徑

    $contentarea =  $CKEditor->editor("content", $rs['contents']);

另一種js或html頁面的修改,代碼如下:

<script type="text/javascript">

CKEDITOR.replace( 'editor1',

{

filebrowserBrowseUrl : 'ckeditor/ckfinder/ckfinder.html',

filebrowserImageBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Images',

filebrowserFlashBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Flash',

filebrowserUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?

command=QuickUpload&type=Files',

filebrowserImageUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?

command=QuickUpload&type=Images',

filebrowserFlashUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?

command=QuickUpload&type=Flash'

});

</script>