Google Code Prettify

2019年9月24日 星期二

【筆記】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 中設定,在此就不多加贅述。

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

以上是今天的安裝紀錄。

沒有留言:

張貼留言