ASP.NET MVC如何实现layui富文本编辑器

这篇"ASP.NET MVC如何实现layui富文本编辑器"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"ASP.NET MVC如何实现layui富文本编辑器"文章吧。

先看看视图层

在视图层,使用的是视图助手--HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型。通过视图助手，为我们生成id和name属性相同的textarea标签。

备注：

在ASP.NET MVC中，能提交表单数据的元素（各种类型的input标签，textarea等），其属性name的值于实体模型中的属性名相同时，传递到控制器中的实体模型或参数，会自动进行映射，方便前端到后台的数据传递。

 1   
 2       
 3            
 4                 @Html.LabelFor(m=>m.Introduce,new {@class="layui-form-label"}) 5                 
 6                  @Html.TextAreaFor(m=>m.Introduce)@*等同*@ 7                 
 8            
 9       
10  

js调用layui的富文本编辑器：

 1 

以上是前端部分，要想实现在layui富文本编辑器中显示图片，看如下后台代码：

实体结果类.layui的接受的值不支持大写，所以属性全小写，这是根据layui,edit图片上传返回结果来编写的此结果类。

 1 using System.Collections.Generic; 2  3 namespace LayuiMvc.Common.Result 4 { 5     public class EditorDataResult 6     { 7         public int code { get; set; } 8  9         public string msg { get; set; }10 11         public Dictionary data { get; set; }12     }13 }

控制器如下：

要引用的命名空间没展示，只抽取了有关富文本的内容！

 1 //富文本编辑器图片上传 2         public ActionResult UploadEditImg(HttpPostedFileBase file) 3         { 4             EditorDataResult editorResult=new EditorDataResult(); 5             if (file!=null&&!string.IsNullOrEmpty(file.FileName)) 6             { 7                 string saveAbsolutePath = Server.MapPath("~/CourseImages/EditorImages"); 8                 string saveFileName = Guid.NewGuid().ToString("N") + "_" + file.FileName; 9                 string fileName = Path.Combine(saveAbsolutePath, saveFileName);10                 file.SaveAs(fileName);11                 editorResult.code = 0;12                 editorResult.msg = "图片上传成功!";13                 editorResult.data=new Dictionary()14                 {15                     {"src","/CourseImages/EditorImages/"+saveFileName },16                     {"title","图片名称" }17                 };18             }19             else20             {21                 editorResult.code = 1;22                 editorResult.msg = "图片上传失败!";23                 editorResult.data=new Dictionary()24                 {25                     {"src","" }26                 };27             }28             JavaScriptSerializer jss=new JavaScriptSerializer();29             string  data = jss.Serialize(editorResult);//转换为Json格式!30 31             return Json(data);32         }

以上就是关于"ASP.NET MVC如何实现layui富文本编辑器"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。