CKEditor 是富文字編輯器，也就是以前大名鼎鼎的 FCKEditor 。以前也出過幾個版本，但現在到 5 之後變了許多， 網上的許多教程都沒辦法用了。於是寫這篇部落格。

下載地址

https://ckeditor.com/ckeditor-5/download/

https://download.cksource.com/CKEditor/CKEditor5/11.1.1/ckeditor5-build-classic-11.1.1.zip

頁面程式碼 

@{
    ViewData["Title"] = "Home Page";
}
<style type="text/css">
    /*設定編輯框最小高度，要不只有一行*/
    .ck-editor__editable {
        min-height: 150px;
    }
</style>
<script src="~/lib/jquery/dist/jquery.js"></script>
@*基礎檔案*@
<script src="~/js/ckeditor5-build-classic/ckeditor.js"></script>
@*區域語言檔案，加上才能將介面（如：格式下拉框）轉中文 *@
<script src="~/js/ckeditor5-build-classic/translations/zh-cn.js"></script>
<script type="text/javascript">
    var myEditor = null;
    $(function () {
        //html編輯器
        setCkEditor();

        //獲取/設定值
        $("#btnGetData").click(function () {
            $("#txtData").val(myEditor.getData());
        });
        $("#btnSetData").click(function () {
            myEditor.setData($("#txtData").val());
        });
    });
    function setCkEditor() {
        ClassicEditor
            .create(document.querySelector("#Content"), {
                language: 'zh-cn',  //設定語言
                toolbar: {          //設定工具欄
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'link',
                        'bulletedList',
                        'numberedList',
                        'imageUpload',
                        'blockQuote',
                        'insertTable',
                        //'mediaEmbed',
                        'undo',
                        'redo'
                    ]
                },
                ckfinder: {     //設定上傳路徑
                    uploadUrl: '/Home/UploadCKEditorImage'
                    //後端處理上傳邏輯返回json資料,包括uploaded(選項true/false)和url兩個欄位
                }
            })
            .then(editor => {
                myEditor = editor;
            })
            .catch(error => {
                console.error(error);
            });
    }
</script>
<form>
    <textarea id="Content" name="Content" style="height:380px;" class="form-control" placeholder="請輸入公告內容"></textarea>
    <table>
        <tr>
            <td><input type="button" value="獲取值" id="btnGetData" /></td>
            <td><textarea id="txtData" style="width:100%;height:50px;"></textarea></td>
        </tr>
        <tr>
            <td><input type="button" value="設定值"  id="btnSetData" /></td>
            <td></td>
        </tr>
    </table>
</form>

 

Controller 程式碼

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using CKEditorDemo.Models;
using System.IO;
using System.Net.Http.Headers;

namespace CKEditorDemo.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult UploadCKEditorImage()
        {
            var files = Request.Form.Files;
            if (files.Count == 0)
            {
                var rError = new
                {
                    uploaded = false,
                    url = string.Empty
                };
                return Json(rError);
            }
            var formFile = files[0];
            var upFileName = formFile.FileName;
            //大小，格式校驗....
            var fileName = Guid.NewGuid() + Path.GetExtension(upFileName);
            var saveDir = @".\wwwroot\upload\";
            var savePath = saveDir + fileName;
            var previewPath = "/upload/" + fileName;

            bool result = true;
            try
            {
                if (!Directory.Exists(saveDir))
                {
                    Directory.CreateDirectory(saveDir);
                }
                using (FileStream fs = System.IO.File.Create(savePath))
                {
                    formFile.CopyTo(fs);
                    fs.Flush();
                }
            }
            catch (Exception ex)
            {
                result = false;
            }
            var rUpload = new
            {
                uploaded = result,
                url = result ? previewPath : string.Empty
            };
            return Json(rUpload);
        }
    }
}
 

最終效果：

原始碼：

https://download.csdn.net/download/yenange/10774451