【筆記】CKEditor(v4.12.1) + CKFinder(v3.5.1) PHP Version 安裝於 IIS 環境

大家好，我是十六。

本篇為我於 2019/09/24，安裝網頁用 HTML 文字編輯器 CKEditor 以及上傳及瀏覽圖片、檔案用的插件 CKFinder 的紀錄筆記。

於 2023/02/13 更新排版，未變更內容。

使用環境大致上為 windows 10 + IIS + PHP。

安裝 CKEditor

首先是在 CKEditor 的官網下載壓縮檔(https://ckeditor.com/ckeditor-4/download/)，我這次使用的是右邊的 Full Package，沒有勾選任何選項，直接下載並解壓縮。

接著是 CKFinder，也是到官網下載(https://ckeditor.com/ckfinder/download/)，使用最左邊的 PHP Version，下載並解壓縮。

如果只是需要使用文字編輯器，而不需要檔案、圖片的操作的話，使用以下程式碼即可。

<script src="(解壓縮 CKEditor 的路徑)/ckeditor/ckeditor.js" ></script>
<textarea id="(自訂ID)"></textarea>
 
<script>
 
CKEDITOR.replace('(自訂ID)');
 
</script>

設定 CKFinder

首先到解壓縮 CKFinder 的資料夾打開 ckfinder/config.php 。

主要修改的地方如下：

1. 使檔案能夠上傳

原本為：

$config['authentication'] = function () {
 
    return false;
 
};

此函式須回傳 true 才能上傳檔案，因此可修改成：

$config['authentication'] = function () {
 
    return true;
 
};

但是這樣修改會使所有人都能上傳檔案，可能出現安全性問題。也可以在此函式中放入 cookie 、 session 等驗證來決定是否回傳 true。

2. 指定檔案上傳的場所

此部分我使用 Local File System 的方式實作，其他方式(如使用 ftp 、 dropbox 、 Amazon S3等)請參考官方文件。

$config['backends'][] = array(
 
    'name'         => '(自訂名稱)',
 
    'adapter'      => 'local',
 
    'baseUrl'      => '(目標資料夾的 URL)',
 
    'root'         => '(目標資料於 local 的絕對路徑)',
 
    'chmodFiles'   => 0777,
 
    'chmodFolders' => 0755,
 
    'filesystemEncoding' => 'UTF-8',
 
);

將目標資料夾的資訊放入以上的變數中，並且確保網頁伺服器對該資料夾有寫入的權限。

3. 暫存資料夾的路徑修改

由於在 IIS 伺服器上使用 sys_get_temp_dir() 這個原本預設使用的函式來取得暫存路徑會出現權限錯誤，造成 CKFinder 出現 Invalid request 的錯誤，因此使用 IIS 伺服器時須修改這個變數。

$config['tempDirectory'] = '(暫存資料夾絕對路徑)';

請記得這個資料夾必須已存在且伺服器有寫入權限，否則一樣會造成錯誤。

4. 在網頁中啟動

修改好設定之後，回到需要使用 CKEditor 的網頁。

官方在文件中提供了兩種方法，而我用的是以下這種：

<script src="(解壓縮 CKEditor 的路徑)/ckeditor/ckeditor.js" ></script>
<script src="(解壓縮 CKFinder 的路徑)/ckfinder/ckfinder.js" ></script>
 
<textarea id="(自訂ID)"></textarea>
 
<script>
 
CKEDITOR.replace( '(自訂ID)', {
	filebrowserBrowseUrl: '(解壓縮 CKFinder 的路徑)/ckfinder/ckfinder.html',
	filebrowserUploadUrl: '(解壓縮 CKFinder 的路徑)/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
} );
 
</script>

因為我的需求上只需要上傳圖片，因此在 filebrowserUploadUrl 使用的參數是 type=Images ，若需要上傳其他類型的檔案，可改為 type=Files 。

另外關於檔案類型的限制等等，可以在 config.php 中設定，在此就不多加贅述。

做好以上設定後應該就能試著打開網頁，上傳圖片或是從指定的伺服器端資料夾選取圖片了。

以上是今天的安裝紀錄。