既上一篇[PHP學習筆記]CKEditor套用在PHP,這裡以CKFinder v2.6.2.1來講解,此版本雖然為DEMO版,但沒有限制了刪除和文件上傳數量,可是有一點要注意,此版本的CKFinder只能在PHP 5下才能操作,不支援PHP 7,切記
在網頁下方中CKFinder versions history選擇CKFinder v2.6.2.1進行下載
下載完成後,解壓縮至路徑\Kitematic\apache-php56\var\www\ckeditor-use-php,如下所示,
打開/ckfinder/config.php,修改第21行下,function CheckAuthentication()中的return false;改成return true;
打開index.html,在裏頭新增以下程式,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ckeditor</title>
<script src="ckeditor/ckeditor.js"></script>
<script src="ckfinder/ckfinder.js"></script>
</head>
<body>
<form action="content.php" method="post">
<textarea id="content" name="content" rows="10" cols="80"></textarea>
<input type="submit" value="送出表單">
</form>
</body>
</html>
<script>
var editor = CKEDITOR.replace( 'content', {
customConfig: '/ckeditor/config.js'
});
CKFinder.setupCKEditor( editor, '/ckfinder/' );
</script>
到路徑\Kitematic\apache-php56\var\www\ckeditor-use-php\ckeditor,打開config.js,在CKEDITOR.editorConfig = function( config )方法下新增以下程式,
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';
config.filebrowserWindowWidth : '1000';
config.filebrowserWindowHeight : '700';
此程式是參考官網所提供的,可以參考,連結CKEditor Integration
打開Docker,啟動apache-php56,開啟網頁,如下所示,
點擊圖像圖示,
會出現瀏覽伺服器按鈕
在點擊圖像圖示->瀏覽伺服器按鈕後,跳出視窗就會出現Images上傳操作介面,如下所示,
點擊Upload來上傳圖片,
全部圖片存放位置在\Kitematic\apache-php56\var\www\ckeditor-use-php\ckfinder\userfiles\images裡
在另外一篇[Vue.js教學筆記]CKFinder套入Webpack模組整合工具-補充也有講解CKFinder v2.6.2.1的套入,供給大家參考
