採用 CKSource.CKFinder.Connector.Sample 完成 ckfinder 一鍵安裝
(一) 安裝 CKSource.CKFinder.Connector.Sample
若要手動安裝，可參考 安裝 ckfinder 的未知錯誤
在新版 VS 2019 的 Nuget 已經找不到 "CKSource.CKFinder.Connector.Sample" 套件了，在 2016/3/17 是最後一次更新，如果要安裝的話，可以直接到 Nuget 網站搜尋。
CKSource.CKFinder.Connector.Sample
接著，可在 VS 內採用指令方式安裝
安裝完成後，直接執行 ckfinder.html 即可看到成功頁面。
(二) 整合到專案中，做成獨立頁面
參考官網提供的整合文件 Embedding as a Widget
整合成功後的頁面如下 :
(三) 整合到檔案上傳欄位，做成彈出視窗
參考官網提供的整合文件 Using CKFinder in a Popup Window
請注意 button 標籤 ! 如果欄位是在表單(form) 裡面，會出現不可預期的錯誤，在 Chrome 下文字欄位無法顯示選取路徑，而在 Edge 下則會另開圖檔視窗。這是因為沒有明確指定 button 類型的緣故，只要改寫如下即可 :
若要手動安裝，可參考 安裝 ckfinder 的未知錯誤
在新版 VS 2019 的 Nuget 已經找不到 "CKSource.CKFinder.Connector.Sample" 套件了，在 2016/3/17 是最後一次更新，如果要安裝的話，可以直接到 Nuget 網站搜尋。
CKSource.CKFinder.Connector.Sample
接著，可在 VS 內採用指令方式安裝
Install-Package CKSource.CKFinder.Connector.Sample -Version 3.3.0-rc5
安裝完成後，直接執行 ckfinder.html 即可看到成功頁面。
(二) 整合到專案中，做成獨立頁面
參考官網提供的整合文件 Embedding as a Widget
<div id="ckfinder1"></div>
<script src="/ckfinder/ckfinder.js"></script> <script>
CKFinder.widget( 'ckfinder1', {
height: 600
} );
</script>
整合成功後的頁面如下 :
(三) 整合到檔案上傳欄位，做成彈出視窗
參考官網提供的整合文件 Using CKFinder in a Popup Window
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKFinder 3</title>
<script src="/ckfinder/ckfinder.js"></script>
</head>
<body>
<script>
function openPopup() {
CKFinder.popup( {
chooseFiles: true,
onInit: function( finder ) {
finder.on( 'files:choose', function( evt ) {
var file = evt.data.files.first();
document.getElementById( 'url' ).value = file.getUrl();
} );
finder.on( 'file:choose:resizedImage', function( evt ) {
document.getElementById( 'url' ).value = evt.data.resizedUrl;
} );
}
} );
}
</script>
<input type="text" size="48" name="url" id="url" />
<button onclick="openPopup()">檔案上傳</button>
</body>
</html>
請注意 button 標籤 ! 如果欄位是在表單(form) 裡面，會出現不可預期的錯誤，在 Chrome 下文字欄位無法顯示選取路徑，而在 Edge 下則會另開圖檔視窗。這是因為沒有明確指定 button 類型的緣故，只要改寫如下即可 :
<button type="button" onclick="openPopup()">檔案上傳</button>
留言
張貼留言