---
title: CKEditor5 搭配 MVC 續CKFinder 3.5.1.2
tags: 程式設計,筆記
description: 安裝教學
---

# CKEditor5 搭配 MVC使用教學 外掛CKFinder 3.5.1.2
[接續 CKFinder 3.5.1.2 搭配 MVC 從零開始安裝教學](https://hackmd.io/@YuXiangLiao/H1WBzR3OO)

## 前言

## 1.平台介紹
:::info
<font> 1.安裝平台 Visual Studio 2019</font>
<font> 2.安裝語言 C# .NET Framework 4.7.2 + MVC</font>
<font> 3.安裝CKEditor5 並外掛 CKFinder3.5.1.2 檔案上傳功能</font>
:::
## 2.安裝步驟Step By Step

### 1.點選Zip package下載目前(2021/05/16) 最新版本27.1

### 2.解壓縮後會得到以下檔案
#### A. 其中 ckeditor.js、ckeditor.js.map、 "translations" 這裡面的語系檔有需要

#### B. 並且放入專案的Scripts資料夾內 (以上安裝完畢...)

## 3.如何使用

### A.利用MVC原始畫面進行Demo，設定在這裡設定一個InputBox
<div class="flex">
<div style="margin:10px">
<a href="https://i.imgur.com/LY0Hwc3.png" target="_blank"><img src="https://i.imgur.com/LY0Hwc3.png" style="width:400px"></img></a>
</div>
<div style="margin:10px">
<a href="https://i.imgur.com/Iv4lcZ7.png)" target="_blank"><img src="https://i.imgur.com/Iv4lcZ7.png)" style="width:400px"></img></a>
<div>
挖出一個可編輯區域
</div>
</div>
</div>

### B.再來是掛上畫面需要使用的JavaScript
(1)掛上專案中對應的ckeditor的js

<script src="~/Scripts/CKEditor/ckeditor.js"></script>
<script src="~/Scripts/CKEditor/zh.js"></script>

(2)指定編輯區域開啟CKeditor

<script>
    ClassicEditor
        .create(document.querySelector('#Content'),
            {                
                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>

(3)掛上以上的指令之後即可顯示以下畫面同時已經可以編輯

## 4.掛上CKFinder外掛
### A.照片上傳
(1)上面的設定完成後仍無法使用圖片上傳功能<font color="red">(點了沒反應)</font>
(2)因此我們必須再Action上加掛兩個指令如下ckfinder： 、mediaEmbed：

<script>
    ClassicEditor
        .create(document.querySelector('#Content'),
            {
                ckfinder: {
                    uploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images&responseType=json&lang=zh-tw'
                },
                mediaEmbed: {
                    previewsInData: true
                },
                toolbar: [
                    'heading',
                    '|',
},...................................