WYSIWYG HTML editor: CKEditor 4.5.10 + CKFinder 2.6.2 整合圖片上傳

CKEditor 4.5.10

https://drive.google.com/file/d/0B2__Lii94oAtbUE0UnVrRjVfVW8/view?usp=sharing

CKFinder 2.6.2

https://drive.google.com/file/d/0B2__Lii94oAtcnR3eHNTZ0FHWjQ/view?usp=sharing

以上兩個套件都可以從官網下載

官網連結如下

CKEditor

http://ckeditor.com/

CKFinder

https://cksource.com/ckfinder

都下載好之後解壓縮

放在 / 目錄下

分別取名 ckeditor 跟 ckfinder

另外取名一個 uploads 目錄

讓 ckfinder 可以上傳檔案到該目錄

權限設定 777 (全開)

打開 ckeditor/config.js

在 CKEDITOR.editorConfig 加入以下內容

config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';

config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';

config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';

config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; //可上傳一般檔案

config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';//可上傳圖檔

config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';//可上傳Flash檔案

打開 ckfinder/config.php

找到 function CheckAuthentication()

將 return false; 改成 return true;

找到 $baseUrl 設定上傳目錄

$baseUrl = '/uploads/';

編輯 test.php

<script src="ckeditor/ckeditor.js"></script>

<textarea class="ckeditor" cols="40" id="editor1" name="content" rows="10"></textarea>

啟動 apache

打開 localhost/test.php

就可以正常使用 ckeditor + ckfinder 了!