[Vue.js教學筆記]CKFinder套入Webpack模組整合工具-補充 @ Michael_Jheng的部落格

官方提供免費的CKFinder v3.4.2為DEMO版,限制了刪除和文件上傳數量,刪除部分在DEMO版完全無法操作,且會顯示"You cannot delete files in DEMO mode."此訊息,如下所示

在文件上傳數量部分只能上傳10個,且會顯示"The number of files per folder after the upload cannot exceed 10 in demo mode."此訊息,如下所示

這兩個限制大大降低此工具的實用度,要解決此問題除了上官網購買License

License Key

或著可以改用CKFinder v2.6.2.1,此版本雖然為DEMO版,但沒有限制了刪除和文件上傳數量,可是有一點要注意,此版本的CKFinder只能在PHP 5下才能操作,不支援PHP 7,切記

CKFinder下載連結

在網頁下方中CKFinder versions history選擇CKFinder v2.6.2.1進行下載

CKFinder v2.6.2.1套用方式可以參考

[Vue.js教學筆記]CKEditor套入Webpack模組整合工具

[Vue.js教學筆記]CKEditor套入Webpack模組整合工具-補充

[Vue.js教學筆記]CKFinder套入Webpack模組整合工具

由於CKFinder v2.6.2.1只能在PHP 5下操作,所以要去XAMPP下載5.6.32/PHP 5.6.32版本

XAMPP下載

CKFinder v2.6.2.1下載完成後,打開/ckfinder/config.php

修改第21行下,function CheckAuthentication()中的return false;改成return true;

如果有先按照[Vue.js教學筆記]CKEditor套入Webpack模組整合工具創造CKEditor文字編輯器,裡頭有在XAMPP這軟體,將CKFinder放置XAMPP中的htdocs文件夾中,利用XAMPP中的Apache功能來啟動,下圖是在htdocs中創造webpackCKEditor資料夾來進行存放,注意要與CKEditor放在同一資料夾中,這樣才能完成CKEditor + CKFinder的結合

在\ckeditor-project\index.html中,新增<script src="http://localhost/ckfinder/ckfinder.js"></script>,

接下來在\ckeditor-project\src\components\Hello.vue,在config下新增

filebrowserBrowseUrl: 'http://localhost/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: 'http://localhost/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl: 'http://localhost/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl: 'http://localhost/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: 'http://localhost/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl: 'http://localhost/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
filebrowserWindowWidth: '1000',
filebrowserWindowHeight: '700'