在Asp.NetCore中配置使用MarkDown富文本编辑器实现图片上传和截图上传...
2023年7月14日发(作者:)
在e中配置使⽤MarkDown富⽂本编辑器实现图⽚上传和截图上传(开源。。。我们的富⽂本编辑器不能没有图⽚上传尤其是截图上传,下⾯我来教⼤家怎么实现MarkDown富⽂本编辑器截图上传和图⽚上传。1.配置编辑器到html页
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/@"}); });3.截图上传功能添加$("#test-editormd").on('paste', function (ev) {var items = (ardData || ardData).items;for (var index in items) {var item = items[index];if ( === 'file') {var blob = ile();var reader = new FileReader(); = function (event) {//将剪切板中复制信息转换成⼀种base64格式字符串var base64 = ;//ajax上传图⽚ $.ajax({ url: "/Editor/UpladFilePIC/@", type: 'post', data: { 'base': base64},async: false, dataType: 'json', success: function (res) {if(==1)//新⼀⾏的图⽚显⽰Value("n"); }, error: function () { alert('图⽚上传错误'); } }); } }; // data url!var url = DataURL(blob); } });4.后台实现图⽚保存(1)截图保存[HttpPost]public string UpladFilePIC(long? id)//id传过来,如需保存可以备⽤ { IFormCollection fc = ;string savePath = ;int code = 0;string msg = "";string base64 = fc["base"];if (base64 != null) {string[] spl = (',');string getImgFormat = spl[0].Split(':')[1].Split('/')[1].Split(';')[0];byte[] arr2 = se64String(spl[1]);//上传到服务器DateTime today = ;string md5 = 5(spl[1]);string upFileNam Directory(pathStart); }var filePath = pathStart + upFileName;string pathNew = tionValue("FileMap:ImgWeb") + e(tionValue("FileMap:ImgPath"), "");using (MemoryStream memoryStream = new MemoryStream(arr2, 0 { (arr2, 0, ); image = ream(memoryStream);// 转成图⽚(filePath); // 将图⽚存到本地 code = 1; msg = pathNew; } }string jsonResult = nResult(code, msg);return jsonResult; }(2)上传保存public JsonResult UpImage(long? id)//id传过来,如需保存可以备⽤ {int success = 0;string msg = "";string pathNew = "";try{var date = Request;var files = ;foreach (var formFile in files) {if ( > 0) {string fileExt = ing(dexOf(".") + 1, ( - dexOf(".") - 1)); //扩展名long fileSize = ; //获得⽂件⼤⼩,以字节为单位string md5 = Commo Directory(pathStart); }var filePath = pathStart + newFileName; pathNew = tionValue("FileMap:ImgWeb") + e(tionValue("FileMap:ImgPath"), "");using (var stream = new FileStream(filePath, )) { (stream); success = 1; } } } }catch (Exception ex) { success = 0; msg = ng(); }var obj = new { success = success, url = pathNew, message = msg };return Json(obj); }5.效果图
发布者:admin,转转请注明出处:http://www.yc00.com/xiaochengxu/1689309561a228527.html
评论列表(0条)