zoukankan      html  css  js  c++  java
  • 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, 后面再说吧。

  • 相关阅读:
    单例模式
    Curator Zookeeper分布式锁
    LruCache算法原理及实现
    lombok 简化java代码注解
    Oracle客户端工具出现“Cannot access NLS data files or invalid environment specified”错误的解决办法
    解决mysql Table ‘xxx’ is marked as crashed and should be repaired的问题。
    Redis 3.0 Cluster集群配置
    分布式锁的三种实现方式
    maven发布项目到私服-snapshot快照库和release发布库的区别和作用及maven常用命令
    How to Use Convolutional Neural Networks for Time Series Classification
  • 原文地址:https://www.cnblogs.com/VirtualMJ/p/5316053.html
Copyright © 2011-2022 走看看