在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传（开源代码.net core3.0）

我们的富文本编辑器不能没有图片上传尤其是截图上传，下面我来教大家怎么实现markdown富文本编辑器截图上传和图片上传。

1.配置编辑器到html页

<div id="test-editormd">
        <textarea id="articlecontent" style="display: none;">@html.raw(model.context)</textarea>
    </div>

2.初始化需要配置图片上传

$(function () {
        testeditor = editormd("test-editormd", {
            width: "99%",
            height: 640,
            syncscrolling: "single",
            path: "/lib/markdown/lib/",
            savehtmltotextarea: true,
            emoji: true,
            //图片上传
            imageupload: true,
            imageformats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageuploadurl: "/editor/upimage/@model.id"
        });

    });

3.截图上传功能添加

$("#test-editormd").on('paste', function (ev) {
        var items = (event.clipboarddata || event.originalevent.clipboarddata).items;
        for (var index in items) {
            var item = items[index];
            if (item.kind === 'file') {
                var blob = item.getasfile();
                var reader = new filereader();
                reader.onload = function (event) {
                    //将剪切板中复制信息转换成一种base64格式字符串
                    var base64 = event.target.result;
                        //ajax上传图片
                        $.ajax({
                            url: "/editor/upladfilepic/@model.id",
                            type: 'post',
                            data: { 'base': base64},
                            async: false,
                            datatype: 'json',
                            success: function (res) {
                                if(res.code==1)//新一行的图片显示
                                    testeditor.insertvalue("\n![" + "image.png" + "](" + res.msg + ")");
                            },
                            error: function () {
                                alert('图片上传错误');
                            }
                        });
                    }
                }; // data url!
                var url = reader.readasdataurl(blob);
            }
    });

4.后台实现图片保存

（1）截图保存

[httppost]
        public  string upladfilepic(long? id)//id传过来，如需保存可以备用
        {
            iformcollection fc = httpcontext.request.form;
            string savepath = string.empty;
            int code = 0;
            string msg = "";
            string base64 = fc["base"];
            if (base64 != null)
            {
                string[] spl = base64.split(',');
                string getimgformat = spl[0].split(':')[1].split('/')[1].split(';')[0];
                byte[] arr2 = convert.frombase64string(spl[1]);
                //上传到服务器
                datetime today = datetime.today;
                string md5 = commonhelper.calcmd5(spl[1]);
                string upfilename = md5 + "." + getimgformat;//生成随机文件名（ system.guid.newguid().tostring() ）
                var pathstart = confighelper.getsectionvalue("filemap:imgpath") + datetime.now.year + "/" + datetime.now.month + "/";
                if (system.io.directory.exists(pathstart) == false)//如果不存在新建
                {
                    system.io.directory.createdirectory(pathstart);
                }
                var filepath = pathstart + upfilename;
                string pathnew = confighelper.getsectionvalue("filemap:imgweb") + filepath.replace(confighelper.getsectionvalue("filemap:imgpath"), "");
                using (memorystream memorystream = new memorystream(arr2, 0, arr2.length))
                {
                    memorystream.write(arr2, 0, arr2.length);
                    system.drawingcore.image image = system.drawingcore.image.fromstream(memorystream);//  转成图片
                    image.save(filepath);  // 将图片存到本地 
                    code = 1;
                    msg = pathnew;
                }
            }
            string jsonresult = commonhelper.getjsonresult(code, msg);
            return jsonresult;
        }

（2）上传保存

public jsonresult upimage(long? id)//id传过来，如需保存可以备用
        {
            int success = 0;
            string msg = "";
            string pathnew = "";
            try
            {
                var date = request;
                var files = request.form.files;
                foreach (var formfile in files)
                {
                    if (formfile.length > 0)
                    {
                        string fileext = formfile.filename.substring(formfile.filename.lastindexof(".") + 1, (formfile.filename.length - formfile.filename.lastindexof(".") - 1)); //扩展名
                        long filesize = formfile.length; //获得文件大小，以字节为单位
                        string md5 = commonhelper.calcmd5(formfile.openreadstream());
                        string newfilename = md5 + "." + fileext; //md5加密生成文件名保证文件不会重复上传
                        var pathstart = confighelper.getsectionvalue("filemap:imgpath") + datetime.now.year + "/" + datetime.now.month + "/";
                        if (system.io.directory.exists(pathstart) == false)//如果不存在新建
                        {
                            system.io.directory.createdirectory(pathstart);
                        }
                        var filepath = pathstart + newfilename;
                        pathnew = confighelper.getsectionvalue("filemap:imgweb") + filepath.replace(confighelper.getsectionvalue("filemap:imgpath"), "");
                        using (var stream = new filestream(filepath, filemode.create))
                        {

                            formfile.copyto(stream);
                            success = 1;
                        }
                    }
                }

            }
            catch (exception ex)
            {
                success = 0;
                msg = ex.tostring();
            }
            var obj = new { success = success, url = pathnew, message = msg };
            return json(obj);
        }

5.效果图

 

相关推荐：

1.在asp.net或.net core中配置使用markdown富文本编辑器有开源模板代码（代码是.net core3.0版本）

2.markdown富文本编辑器怎么加载模板文件

 

开源地址 动动小手，点个推荐吧！

 

注意：我们机遇屋该项目将长期为大家提供asp.net core各种好用demo，旨在帮助.net开发者提升竞争力和开发速度，建议尽早收藏该模板集合项目。