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 = 0;
                editorResult.msg = "圖片上傳成功!";
                editorResult.data=new Dictionary<string, string>()
                {
                    {"src","/CourseImages/EditorImages/"+saveFileName },
                    {"title","圖片名稱" }
                };
            }
            else
            {
                editorResult.code = 1;
                editorResult.msg = "圖片上傳失敗!";
                editorResult.data=new Dictionary<string, string>()
                {
                    {"src","" }
                };
            }
            JavaScriptSerializer jss=new JavaScriptSerializer();
            string  data = jss.Serialize(editorResult);//轉換為Json格式!

            return Json(data);
        }

展示一下結果！