---
title: CKEdiror5 + CKFinder 3
tags: 程式設計,筆記
description: 安裝及測試
---

# 首先安裝CKFinder 3.5.1.1

安裝後因為無法執行因此 參考"浮雲雅築" 如下
> https://shaurong.blogspot.com/2020/09/cksourceckfinder-3511-nuget.html

*使用下面指令安裝

*Install-Package CKSource.CKFinder.Connector.Sample -Version 3.3.0-rc5*

1. 降板回3.3.0-rc5之後執行畫面如下.... 依然無法執行 

2. 最後確認應該是***System.Net.Http.Formatting版本問題降版本回5.2.3***

3. Bingo已經可以正常執行
4. 測試一下上傳照片狀況...恩...看起來也沒問題了
5. 順便說一下，CKFinder的預設路徑如下：

路徑上原本有問>> "/~~ckfinder~~/userfiles/" 這個釋回傳CKEditor時會用到 建議改為"/userfiles/"，理由後面會說

>>Web.config<<
<backends>

  /*  This is special file system for private CKFinder data, it shouldn't be used for normal files.
    It shouldn't be modified unless CKFinder is hosted without access to the local file system.*/

  <backend name="CKFinderPrivate" type="local">
    <option name="basePath" value="App_Data" />
  </backend>
  <backend name="default" type="local">
    <option name="basePath" value="userfiles" />   /*這是跟目錄*/
    <option name="publicUri" value="/userfiles/" /> 
  </backend>
</backends>

6. 接下來安裝CKEditor首先下載 27.1.0

8. 將重要的兩個檔案裝在Sctipt目錄
10. 好了之後隨意開一個 <input/>並且掛上script

<script src="~/Scripts/CKEditor/ckeditor.js"></script>
<script src="~/Scripts/CKEditor/zh.js"></script>
<script src="~/CKFinderScripts/ckfinder.js"></script>
<script type="text/javascript">
    ClassicEditor
        .create(document.querySelector('#Content'),
            {
                ckfinder: {
                    uploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images&responseType=json'
                },
                mediaEmbed: {
                    previewsInData: true
                },
                toolbar: [
                    'heading',
                    '|',
                    'bold',
                    'italic',
                    'link',
                    'imageUpload',
                    'ckFinder',
                    '|',
                    'bulletedList',
                    'numberedList',
                    '|',
                    'indent',
                    'outdent',
                    '|',
                    'blockQuote',
                    'insertTable',
                    'mediaEmbed',
                    'undo',
                    'redo'
                ],
                language: 'zh'
            })
        .catch(function (error) {
            console.error(error);
        });
</script>

11. OK輸入完上述之後 來看看畫面
12. 測試上傳圖片發現不對勁...圖片出不來，利用**debug模式發現回傳的路徑異常**

13. 正確路徑應該是這樣，表示程式回傳路徑錯誤，如同前面第5點說的
14. 修正後可以正常上傳並顯示

15. 接下來就是重頭戲啦 CKFinder核心上傳功能也可以正常使用!!XD 

16. 對了另外提一點，試用版的CkFinder每五分鐘會跳出這個視窗，且無法刪除檔案，有需要的人再購買正式版吧!!