版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yenange/article/details/83894916
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);
}
}
}
最终效果：
