官方提供免費的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
或著可以改用CKFinder v2.6.2.1,此版本雖然為DEMO版,但沒有限制了刪除和文件上傳數量,可是有一點要注意,此版本的CKFinder只能在PHP 5下才能操作,不支援PHP 7,切記
在網頁下方中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版本
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'
以上修改完畢後,先開啟XAMPP中的Apache功能,讓CKEditor與CKFinder能夠執行,在node指令區輸入"npm run dev"執行會出現以下畫面,
點擊圖像圖示,
會出現瀏覽伺服器按鈕
點擊後會跳出視窗,此時會發現視窗中沒有任何畫面,這是因為在執行Webpack時的port為8080,而XAMPP中的Apache的port為80,要在同一個port底下才能順利執行
接下來執行"npm run build"產生發佈檔,將dist資料夾底下檔案static與index.html複製至/xampp/htdocs/webpackCKEditor裡,如下所示,
重新開啟XAMPP中的Apache功能,出現以下畫面,
在點擊圖像圖示->瀏覽伺服器按鈕後,跳出視窗就會出現Images上傳操作介面,如下所示,
點擊Upload來上傳圖片,為了驗證是否能上傳10張圖以上,下面將一次上傳30張圖,
全部上傳完成
再來測試刪除部份
順利刪除
將圖片就會套入此操作視窗,調整適當的尺寸,按下確定
此圖片就會出現在CKEditor文字編輯器上了
全部圖片存放位置在/ckfinder/userfiles/images裡
上一層/ckfinder/userfiles資料夾內容如下,
接下來可以試著上傳Files與Flash檔
留言列表
