asp.net mvc 5 简单的使用 wangEditor3 富文本编辑器

1.在 wangEditor3 的官网下载 http://www.wangeditor.com/

里面存在着一个 demo 和文档普通的看下文档就可以，这里主要内容是图片的上传，在官方的文挡中，对于图片的上传的文档的过于模糊，导致了我的辛苦摸索。

<div id="div1">
    <p>在此编辑你的文章内容</p>
</div>


<script type="text/javascript" src="~/wangEditor/release/wangEditor.min.js"></script>
<script>
    var E = window.wangEditor
    var editor = new E("#div1")
    //配置图片上传到服务器端的接口，mvc 中就是 控制器的 Action
    editor.customConfig.uploadImgServer = '/Article/UploadImg';
    //配置上传时间
    editor.customConfig.uploadImgTimeout = 50000;
    editor.create();
    
    //获得编辑的部分
    editor.txt.html();    //可获取到编辑器中所有的 HTML内容，可通过 ajax 进行传输，或者什么其他的
</script>

控制器端接收上传的图片

可先配置一下请求的最大长度

在Web.config 文件下进行配置 maxRequestLength 属性

<system.web>
    <httpRuntime targetFramework="4.7.2" maxRequestLength="50000" />
</system.web>

控制器 多图片上传处理

[HttpPost]
public JsonResult UploadImg()
{
    //在 mvc 中 上传的文件通常都在Request.Files 属性中
    //属性摘要：获取客户端上载的文件的集合，
    if(Request.Files != null)
    {
        //返回的json数据中的data部分，多文件上传
        string[] data = new string[Request.Files.Count];
        for (int i = 0; i < Request.Files.Count; i++)
        {
            //通过HttpPostedFileBase 类来获得单个文件的处理
            HttpPostedFileBase file = Request.Files[i];
            //新的文件名
            string type = file.FileName.Substring(file.FileName.LastIndexOf("."));
            data[i] = DateTime.Now.ToFileTime() + type;
            //定义服务器的文件夹，用来保存文件
            var strServerFilePath = Server.MapPath("~/Img/");
            string path = Path.Combine(strServerFilePath, data[i]);
            //保存
            file.SaveAs(path);
            //返回的文件名格式，请求+端口号+文件夹+文件名的形式返回前端，接收，要是格式不正确wandEditor 编辑器将会视为上传失败，就不显示以经上传成功的图片。
            data[i] = "http://" + Request.Url.Authority + "/Img/" + data[i];
        }
        //要返回的json 数据
        var json = new
        {
            errno = "0",
            data
        };
        return Json(json, JsonRequestBehavior.AllowGet);
    }
    return Json("{'errno':1}", JsonRequestBehavior.AllowGet);
}

前端显示编辑器的内容

@Html.Raw(Model.Content)

asp.net mvc 5 简单的使用 wangEditor3 富文本编辑器

猜你喜欢