asp.netcoremvc富文本编辑的实现

新闻消息等发布需要富文本编辑发布及修改。记录下:

1.采用kindeditor免费插件

2.kindeditor插件图片上传采用了iframe，默认违反了跨域访问的限制。需要将  [ValidateAntiForgeryToken]去掉。

3.具体配置.要求jquery在前面。

<script src="http://code.jquery /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里添加图片上传功能，图片上传到 root下的文件夹。

  [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)

​​​​​​