在layui中使用kindeditor富文本編輯器(.net core)


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的基本方法

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM