惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Jina AI
Jina AI
博客园 - 司徒正美
大猫的无限游戏
大猫的无限游戏
博客园 - 三生石上(FineUI控件)
J
Java Code Geeks
博客园 - 聂微东
酷 壳 – CoolShell
酷 壳 – CoolShell
爱范儿
爱范儿
美团技术团队
腾讯CDC
博客园 - Franky
MyScale Blog
MyScale Blog
人人都是产品经理
人人都是产品经理
罗磊的独立博客
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
aimingoo的专栏
aimingoo的专栏
博客园_首页
V
V2EX
Martin Fowler
Martin Fowler
T
The Blog of Author Tim Ferriss

博客园 - 小马过河MJ

Identity Server introspect 调用 /connect/introspect windows forget jenkins password. 转载(Asp.net Core 中试使用ZKWeb.System.Drawing) EFCore & Mysql migration on Production HTML to PDF pechkin Log4net 为MVC 添加下载权限 辞职 MiniProfiler Android Studio 设置LogCat 颜色 运用Swagger 添加WebAPI 文档 给现有MVC 项目添加 WebAPI async await 跨域调用WebApi MVC 伪静态 设置EntityFramework 在开发时自动更新数据库 PagedList.MVC 应用 MVC 自定义错误处理 SQL Server 索引结构及其使用(四)[转] SQL Server 索引结构及其使用(三)[转]
Summernote
小马过河MJ · 2016-03-24 · via 博客园 - 小马过河MJ

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, 后面再说吧。