2015年11月30日 星期一

[筆記]CKEditor加上CKFinder上傳圖檔更方便

在前一篇[筆記] CKEditor內容編輯器安裝說明說明了CKEditor這個內容編輯器的基本安裝方法,在基本的CKEditor中可以從外部的網址匯入圖片,但如果我們想要直接在編輯器中直接搭配上上傳圖片的功能,我們可以怎麼做呢?
在基本的CKEditor中,當我們點選內容編輯器中的「圖片」圖示時


只可以使用網址匯入圖片的功能,還沒有辦法上傳圖片



CKFinder


CKFinder是CKSource提供的另一套免費外掛,它可以作為一個管理檔案的後台系統,在這裡我們只是用它最基本的功能,將它和CKEditor做一個簡單的整合,讓CKEditor可以有上傳圖片的功能。

像是範例網站顯示的這樣



STEP:下載CKFinder

CKFinder下載:https://cksource.com/ckfinder/download
選擇所使用的伺服器端程式,並選擇下載,由於我們使用的後端語法是PHP,所以我們就下載PHP版本的CKFinder。


這裡需要注意的是CKFinder對於伺服器端有一些要求,最主要的包括PHP版本必須要是5.4以上的版本,同時需要啟動GDExtention(一般預設是開啟)和Fileinfo extention(一般預設是關閉)的這個擴充,並且要支持JSON MIME type。


STEP:檢驗PHP系統是否支援

首先開啟一個空白的php檔,並輸入以下內容:
 <?php
 if (version_compare(PHP_VERSION, '5.4.0') >= 0) {
     echo ' [OK] PHP version is newer than 5.4: '.phpversion();
 } else {
     echo ' [ERROR] Your PHP version is too old for CKFinder 3.x.';
 }
 
 if (!function_exists('gd_info')) {
     echo ' [ERROR] GD extension is NOT enabled.';
 } else {
     echo ' [OK] GD extension is enabled.';
 }
 
 if (!function_exists('finfo_file')) {
     echo ' [ERROR] Fileinfo extension is NOT enabled.';
 } else {
     echo ' [OK] Fileinfo extension is enabled.';
 }
 ?>

如果上述條件都符合的話,應該會看到各個項目都是ok的!


STEP:上傳CKFinder至伺服器

接著在伺服器建立一個CKFinder的資料夾,把剛剛下載的壓縮檔全部上傳上去。


STEP:啟動CKFinder

進入到CKFinder的資料夾中,找到config.php這個檔案,接著尋找下面這一串內容:

 $config['authentication'] = function() {
     return false;
 };
找到之後把裡面的false改成true。

註:這是啟動CKFinder最簡單的方法,但並不是最安全的做法,因為任何權限的會員只要進到這個頁面都可以上傳檔案,其它設定權限的方式可以參考CKFinder關於權限說明的文件

STEP:變更檔案儲存路徑

config.php這個檔案中,找到下面這段
 $config['backends'][] = array(
     'name'         => 'default',
     'adapter'      => 'local',
     'baseUrl'      => '/ckfinder/userfiles/'
 );
這裡的baseUrl可以變更檔案上傳後儲存的路徑。

STEP:整合CKEditor和CKFinder

上面的步驟都完成後,就可以整合CKEditor和CKFinder了,整合的方法非常簡單。

首先,我們一樣在<head></head>中間匯入CKFinder:
<script src="ckfinder/ckfinder.js"></script>

接著,在上一篇:[筆記] CKEditor內容編輯器安裝說明中,我們提到要叫出CKEditor只需要在網頁中輸入:
<script>
CKEDITOR.replace( 'content', {});
</script>
,這時候如果我們把程式碼做一些簡單的修改,多加一行,改成這樣
            <script>
    CKFinder.setupCKEditor();
          CKEDITOR.replace( 'content', {
    });
            </script>
就可以把CKFinder和CKEditor整合在一起了。


上傳好的檔案就會在指定的資料夾中了



參考資料:
CKFinder Documentation
Share:

0 意見:

張貼留言