layui 提供了豐富的內置模塊,使用輕便,但有不足的是,富文本編輯器所提供的功能太少。這就可能需要引入其他的編輯器。
一、去官網下載kindeditor文件,放入wwwroot中。
二、在需要添加編輯器的頁面,引用相應的js文件
<script charset="utf-8" src="~/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="~/kindeditor/lang/zh-CN.js"></script>
<link rel="stylesheet" href="~/kindeditor/themes/default/default.css" />
在需要編輯器的地方加入textarea標簽
<textarea id="detail_desc" name="Body" lay-verify="content"></textarea>
因為我是把編輯器放在lauyi的表單中的,所以我會加入一些lauyi元素的代碼,主要是為了契合表單。但其實只要textarea標簽就可以了
三、寫入相關的js代碼
<script type="text/javascript">
KindEditor.ready(function (K) {
var editor = K.create('#detail_desc', {
height: '500px',
uploadJson: '/Manage/SolvingProgramme/KindeditorPicUpload',
fileManagerJson: '/Manage/SolvingProgramme/KindeditorPicUpload',
allowFileManager: true
});
});
</script>
detail_desc就是textarea標簽的那個id
四、.net core后端部分
完成了前面,富文本編輯器就出來了,但如果需要上傳圖片,則需要寫后端代碼。我現在用的是.net core ,所以我用.net core的方式來實現后端的上傳代碼功能。
[HttpPost("KindeditorPicUpload")]
public IActionResult KindeditorPicUpload(IList<IFormFile> imgFile, string dir)
{
PicUploadResponse rspJson = new PicUploadResponse() { error = 0, url = "/SolvingProgramme/" };
long size = 0;
string tempname = "";
foreach (var file in imgFile)
{
var filename = ContentDispositionHeaderValue
.Parse(file.ContentDisposition)
.FileName
.Trim('"');
var extname = filename.Substring(filename.LastIndexOf("."), filename.Length - filename.LastIndexOf("."));
var filename1 = System.Guid.NewGuid().ToString() + extname;
tempname = filename1;
var path = _hostingEnvironment.WebRootPath;
filename = _hostingEnvironment.WebRootPath + $@"\images\SolvingProgramme\{filename1}";
size += file.Length;
using (FileStream fs = System.IO.File.Create(filename))
{
file.CopyTo(fs);
fs.Flush();
//這里是業務邏輯
}
}
rspJson.error = 0;
rspJson.url = $@"../../images/SolvingProgramme/" + tempname;
return Json(rspJson);
}
/SolvingProgramme/、/images/SolvingProgramme/都是文件的保存路徑,可根據自己的需要去調整。
五、編輯功能(后台數據的回顯)
如果需要從數據庫中讀取數據,則只需要加這行代碼
$("#detail_desc").html('@Model.SolvingProgramme.Body');
但要切記這行代碼加的地方。是需要加到生成編輯器的前面,如圖:
這樣,即可實現后台數據對編輯器的回顯
這就是在.net core中使用kindeditor的基本方法