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

0 意見:

張貼留言