asp.net core mvc 富文本编辑的实现
新闻消息等发布需要富文本编辑发布及修改。记录下:
1.采用kindeditor免费插件
2.kindeditor插件图片上传采用了iframe，默认违反了跨域访问的限制。需要将 [ValidateAntiForgeryToken]去掉。
3.具体配置.要求jquery在前面。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="~/js/jquery.uniform.min.js"></script>
<link rel="stylesheet" href="~/lib/themes/default/default.css" />
<script src="~/lib/kindeditor-all-min.js"></script>
<script src="~/lib/lang/zh-CN.js"></script>
<script type="text/javascript">
// 初始化 KindEditor
KindEditor.ready(function (K) {
window.editor = K.create('#editor', {
width: '100%', // 编辑器宽度
height: '500px', // 编辑器高度
langType: 'zh-CN', // 设置为中文
uploadJson: '/News/UploadImage', // 图片上传接口
allowFileManager: false // 是否显示文件管理器
});
});
</script>
4.配合发布页面信息
<form asp-action="Create">
<div class="form-group">
<label asp-for="Content" class="control-label"></label>
<textarea id="editor" asp-for="Content"></textarea>
<span asp-validation-for="Content" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
5.create页面信息 正常写即可，kindeditor插件会将编辑内容以string类型放到textarea
[HttpPost]
public async Task<IActionResult> Create( News news)
{
if (ModelState.IsValid)
{
_context.Add(news);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(news);
}
6.在controller里添加图片上传功能，图片上传到wwwroot下的文件夹。
[HttpPost]
public async Task<IActionResult> UploadImage(IFormFile imgFile)
{
if (imgFile == null || imgFile.Length == 0)
{
return Json(new { error = 1, message = "文件为空" });
}
// 检查文件类型
var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif" };
var fileExtension = Path.GetExtension(imgFile.FileName).ToLower();
if (!allowedExtensions.Contains(fileExtension))
{
return Json(new { error = 1, message = "文件类型不支持" });
}
// 保存文件
var uploadsFolder = Path.Combine(_env.WebRootPath, "uploads");
if (!Directory.Exists(uploadsFolder))
{
Directory.CreateDirectory(uploadsFolder);
}
var fileName = Guid.NewGuid().ToString() + fileExtension;
var filePath = Path.Combine(uploadsFolder, fileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
await imgFile.CopyToAsync(stream);
}
// 返回 KindEditor 需要的 JSON 格式
return Json(new
{
error = 0,
url = $"/uploads/{fileName}"
});
}
7.修改同添加一样，但是delete要单独对图片进行删除，因为默认的只是删除了sqlserver里table的信息，文件夹下的图片需要格外处理。采用HtmlAgilityPack对table记录的string进行查找匹配处理。
// POST: News/Delete/5
[HttpPost, ActionName("Delete")]
public async Task<IActionResult> DeleteConfirmed(int id)
{
var news = await _context.News.FindAsync(id);
if (news != null)
{
_context.News.Remove(news);
Removeimgs(news.Content);
}
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
public void Removeimgs(string imgstrs)
{
var doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(imgstrs);
var srcList = doc.DocumentNode.Descendants("img")
.Select(img => img.GetAttributeValue("src", ""))
.Where(s => !string.IsNullOrEmpty(s));
foreach (var src in srcList) {
if (!string.IsNullOrEmpty(src))
{
var oldFilePath =Path.Combine(_env.WebRootPath,src.TrimStart('/'));
if (System.IO.File.Exists(oldFilePath))
{
System.IO.File.Delete(oldFilePath);
}
}
}
}
8.在详细内容页面，需要将数据库中记录的string修改成html格式。
@Html.Raw(Model.Content)
