ASP.NET MVC实现layui富文本编辑器应用

先看看视图层

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

备注：

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

   <div class="layui-row">
       <div class="layui-col-xs12">
            <div class="layui-form-item layui-form-text">
                 @Html.LabelFor(m=>m.Introduce,new {@class="layui-form-label"})
                 <div class="layui-input-block">
                  @Html.TextAreaFor(m=>m.Introduce)@*<textarea id="Introduce" name="Introduce"></textarea>等同*@
                 </div>
            </div>
       </div>
  </div>

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

 <script type="text/javascript">
      layui.use('layedit',
             function () {
                 var layedit=layui.layedit;
                  //配置图片接口
                 //注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。
                 layedit.set({
                     uploadImage: {
                         url: '/Course/UploadEditImg' //接口url
                         , type: 'post' //默认post
                     }
                 });
                 //建立富文本编辑器,更多设置,看layui文档,这里只是核心要点
                 layedit.build('Introduce');//build方法参数为id所对应的值,注意,此处不能加#符号!
             }    

 </script>    

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

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

 using System.Collections.Generic;

 namespace LayuiMvc.Common.Result
 {
     public class EditorDataResult
     {
         public int code { get; set; }

         public string msg { get; set; }

         public Dictionary<string,string> data { get; set; }
     }
 }

控制器如下：

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

 //富文本编辑器图片上传
         public ActionResult UploadEditImg(HttpPostedFileBase file)
         {
             EditorDataResult editorResult=new EditorDataResult();
             if (file!=null&&!string.IsNullOrEmpty(file.FileName))
             {
                 string saveAbsolutePath = Server.MapPath("~/CourseImages/EditorImages");
                 string saveFileName = Guid.NewGuid().ToString("N") + "_" + file.FileName;
                 string fileName = Path.Combine(saveAbsolutePath, saveFileName);
                 file.SaveAs(fileName);
                 editorResult.code = ;
                 editorResult.msg = "图片上传成功!";
                 editorResult.data=new Dictionary<string, string>()
                 {
                     {"src","/CourseImages/EditorImages/"+saveFileName },
                     {"title","图片名称" }
                 };
             }
             else
             {
                 editorResult.code = ;
                 editorResult.msg = "图片上传失败!";
                 editorResult.data=new Dictionary<string, string>()
                 {
                     {"src","" }
                 };
             }
             JavaScriptSerializer jss=new JavaScriptSerializer();
             string  data = jss.Serialize(editorResult);//转换为Json格式!

             return Json(data);
         }

展示一下结果！