大家好,我是十六。
本篇為我於 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 中設定,在此就不多加贅述。
做好以上設定後應該就能試著打開網頁,上傳圖片或是從指定的伺服器端資料夾選取圖片了。
以上是今天的安裝紀錄。
沒有留言:
張貼留言