Summernote

1. 引用Summernote文件

<link href="~/Content/plugins/summernote/summernote.css" rel="stylesheet" />
<link href="~/Content/plugins/summernote/summernote-bs3.css" rel="stylesheet">
<script type="text/javascript" src="~/Scripts/plugins/summernote/summernote.min.js"></script>

2. 添加 Summernote Div, 因為我是直接從數據庫中讀取信息，所以直接在Div中顯示數據庫信息, 數據庫中存放着帶有html 標簽。

 <div class="summernote">
      @Html.Raw(ViewData["Description"].ToString())
 </div>

3. 初始化 Summernote, 並且重寫Image upload, 感覺圖片存在數據庫中，總覺得有那么點不妥。

<script type="text/javascript">

    function sendFile(file,editor,$editable){
        var formData = new FormData();
        formData.append("file", file[0]);
            
        $.ajax({
            data: formData,  
            type: "POST",  
            url: "/Product/UploadProductDescriptionImage",  
            cache: false,  
            contentType: false,  
            processData: false,  
            success: function(imageUrl) {  
                editor.insertImage($editable, imageUrl);  
                //$('.summernote').summernote('editor.insertImage',imageUrl);  
            },  
            error: function() {  
                  
            }  
        })
    }

    $(function () {

        $('.summernote').summernote({
            onImageUpload: function(files, editor, $editable) {
                sendFile(files,editor,$editable);
            },
        });
       

        $("#btnSaveDescription").click(function () {

            var sHTML = $('.summernote').code();

            $.ajax({
                url:"/Product/UpdateProductDescription",
                type:"POST",
                contentType: "application/json",
                data:JSON.stringify({
                    ProductId:@ViewBag.ProductId, Description :sHTML
                }),
                datatype:"json",
                success: function(data){
                    if(!data){
                        alert("操作失敗，請與管理員聯系");
                    }
                    else{
                        alert("保存成功");
                    }
                }
            });
        });

        $("#ProductId").val("@ViewBag.ProductId");

        $("#Img_Upload").change(function () {
            if ($("#Img_Upload").val() != '') {
                //alert($("#Img_Upload").val());
            }
            else {
                alert("請選擇上傳圖片");
                return;
            }
        });

        $("#btnSave").click(function () {
            if ($("#Img_Upload").val() == '') {
                alert("請選擇上傳的圖片");
                return false;
            }
        });

        $("#btnUpload").click(function () {
            $("#OrderNum").val("");
            $("#ImgUrl").val("");
        });

        $("#btnBack").click(function () {
            window.location.href = "/Product/ProductList";
        })
    });
</script>

4. 來看下后台的controller 代碼

 [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult UpdateProductDescription(int ProductId,string Description)
        {
            bool isResult = false;

            try
            {

                ProductBLL ProBS = new ProductBLL();
                ProductModel ProModel = ProBS.Find(u => u.Id == ProductId);
                ProModel.Description = Description;

                ProBS.Update(ProModel);
                isResult = true;
            }
            catch
            {
                isResult = false;
            }

            return Json(isResult, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult UploadProductDescriptionImage(HttpPostedFileBase file)
        {
            var imageUrl = "";

            if (file != null && file.ContentLength > 0)
            {
                string fileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "-" + Path.GetFileName(file.FileName);
                string filePath = Path.Combine(Server.MapPath("~/Images/Products/ProductDescription"), fileName);
                file.SaveAs(filePath);
                imageUrl = "~/Images/Products/ProductDescription/" + fileName;
                imageUrl = Url.Content(imageUrl);
            }

            return Json(imageUrl);
        }

 [HttpGet]
        public ActionResult ProductImageEdit(int ProId = 0)
        {
            ProductBLL ProBS = new ProductBLL();
            ProductImageBLL ProImgBS = new ProductImageBLL();
            if(ProId != 0)
            {
                var ImgTypeList = CommonFuncs.GetProductImageType(0);
                ViewData["ImgType"] = ImgTypeList;

                var sProModel = ProBS.Find(u => u.Id == ProId);
                ViewData["ProName"] = sProModel.Name;

                var sImgList = ProImgBS.FindList(u => u.ProductId == ProId);
                ViewData["MainImages"] = sImgList.Where(u => u.ImgType == 1).ToList();

                ViewData["SubImages"] = sImgList.Where(u => u.ImgType == 2).ToList();

                ViewData["ProductDescImages"] = sImgList.Where(u => u.ImgType == 3).ToList();

                ViewBag.ProductId = ProId;

                ViewData["Description"] = sProModel.Description;
            }
            else
            {
                return RedirectToAction("ProductList");
            }

            return View();
        }

最后來張效果圖

 

也許還有Bug, 后面再說吧。