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

推荐订阅源

阮一峰的网络日志
阮一峰的网络日志
Blog — PlanetScale
Blog — PlanetScale
B
Blog RSS Feed
L
LangChain Blog
Jina AI
Jina AI
爱范儿
爱范儿
C
Check Point Blog
云风的 BLOG
云风的 BLOG
Last Week in AI
Last Week in AI
月光博客
月光博客
GbyAI
GbyAI
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Stack Overflow Blog
Stack Overflow Blog
V
V2EX
A
About on SuperTechFans
有赞技术团队
有赞技术团队
Microsoft Azure Blog
Microsoft Azure Blog
The GitHub Blog
The GitHub Blog
博客园 - Franky
Apple Machine Learning Research
Apple Machine Learning Research
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google DeepMind News
Google DeepMind News
博客园 - 三生石上(FineUI控件)
S
SegmentFault 最新的问题

博客园 - 小马过河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, 后面再说吧。