基于Vue实现微信小程序的图文编辑器

前端之家收集整理的这篇文章主要介绍了基于Vue实现微信小程序的图文编辑器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

由于微信小程序不能使用常规的图文编辑器(比如百度的UEditor )编辑新闻内容之类的,所以用vue写了个针对小程序用的图文编辑器。效果如下

多图上传图片用到了 ajaxfileupload.js (不知道哪位仁兄写的,拿来用了,很好用)

最终形成一串Json数据(转成字符串,传入后台存入数据库小程序端用JSON.parse 转成JSON ,按照后台一样的方式渲染即可【小程序代码还没写,后面再贴出来吧】)

json格式如

5023656415428.jpg_E500_100.jpg","content":"/upload/dyProductImgs/20180725/7027501123579481.jpg_E500_100.jpg","groupid":"627459ec-d372-e372-218e-b93b83cb2d02"}] 

 HTML代码

Box vue-container">
Box(i-1)">
Box">
Box-sub">
文字
图片
链接
Box">
删除线" v-on:click.stop="fontdel(i-1)" v-bind:class="{ 'head-btn': true,'sel':editorData[i-1].font.del==1 }">
Box" v-bind:class="{'hide':editorData[i-1].font.showcolor!=1}">
代码
Box">
Box">

js 代码

需要引用 jquery、vue、ajaxfileupload

index && pageData.editorData[index].mytype == 1) pageData.editorData[index].font.showcolor = 0; },//上传图片 uploadfile: function (index) { //用于强制重新渲染 input.file 用于清空之前的文件 ^_^ pageData.reload = false; //添加一个组ID,方便后面上传完成后识别应该更新哪条数据 var groupid = guid(); var that = this; var fileid = "file" + index; var files = $("#" + fileid)[0].files; for (var i = 0; i < files.length; i++) { that.itemadd(index + i,2,groupid); } jQuery.ajaxFileUpload({ url: '@Url.Content("~/img/uploadproductdpicArray?path=dyProductImgs")',//用于文件上传的服务器端请求地址 secureuri: false,//是否需要安全协议,一般设置为false fileElementId: fileid,//文件上传域的ID dataType: 'json',//返回值类型 一般设置为json success: function (data) //服务器成功响应处理函数 { //var result = JSON.parse(data); pageData.reload = true; var result = data; console.log(result); if (result.resultState == "1") { var j = 0; for (var i = 0; i < pageData.editorData.length; i++) { if (pageData.editorData[i].groupid && pageData.editorData[i].groupid == groupid) { pageData.editorData[i].content = "@Url.Content("~")" + result.Data[j].substring(1); pageData.editorData[i].loading = 1; j++; } } console.log(result); } else alert("上传失败!"); },error: function (data)//服务器响应失败处理函数 { alert("上传失败!"); } }); },//上升模块 itemup: function (index) { if (index > 0) { var itemData = pageData.editorData[index]; pageData.editorData.splice(index,1); pageData.editorData.splice(index - 1,itemData); } },//下降模块 itembottom: function (index) { if (index + 1 < pageData.editorData.length) { var itemData = pageData.editorData[index]; pageData.editorData.splice(index,1); pageData.editorData.splice(index + 1,//删除模块 itemdel: function (index) { pageData.editorData.splice(index,1); },//添加一个新的模块 itemadd: function (index,type,groupid) { var itemData = null; switch (type) { case 1: itemData = { mytype: 1,content: "",font: { size: 0,//字体大小 每+1 字体+2px -1同减 weight: 0,//是否加粗 del: 0,//是否删除线 line: 0,//是否下划线 center: 0,//是否居中 color: "#000",//字体颜色 bgcolor: "#fff",//字体颜色 showcolor: 0 //是否显示颜色选择框 } }; break; case 2: itemData = { mytype: 2,content: "res/img/1.jpg",loading: 0 //是否已经成功上传 }; break; case 3: itemData = { mytype: 3,content: "" }; break; default: alert('暂不支持'); break; } if (itemData) { if (groupid) itemData.groupid = groupid; pageData.editorData.splice(index,//一个用于阻止冒泡的事件 stopclick: function () { },},//实例被调用后 created: function () { },//el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。 updated: function () { this.$nextTick(function () { ////console.log(pageData); //var files = this.$refs.FeedbakcImg; //for (var i = 0; i < files.length; i++) { // files[i].clearFiles(); //} }) } });

后台代码 .net (有些方法没有放出来,后面我有时间整理一个单独的demo出来放到云盘)

/// 批量上传商品详情图片 /// /// [HttpPost] public ContentResult uploadproductdpicArray(string path) { rData> result = new rData>(); result = UpLoadPicArray(path); if (result.resultState == 1) for (int i = 0; i < result.Data.Count; i++) { if (ST.Tool.ImageHelp.GetImageSuffix(result.Data[i]) != ".gif") { string imgPath = Server.MapPath($"~{result.Data[i]}"); string imgPathNoSuffix = imgPath.Substring(0,imgPath.LastIndexOf(".")); string imgSuffix = ST.Tool.ImageHelp.GetImageSuffix(imgPath); Image oldimg = Image.FromFile(imgPath); //读取图片 //压缩宽度为500的图片,等比 清晰度 100 ST.Tool.ImageHelp.PicThumbnail(oldimg,imgPath + "_E500_100" + imgSuffix,500,100); oldimg.Dispose(); result.Data[i] = result.Data[i] + "_E500_100" + imgSuffix; } } var jsonResult = JsonConvert.SerializeObject(result); return new ContentResult() { Content = jsonResult }; } /// /// 上传图片 /// /// 图片的文件名称 /// 保存结果 private rData UpLoadPic(string _path="public") { rData result = new rData(); HttpFileCollectionBase _file = Request.Files; if (_file.Count > 0) { long size = _file[0].ContentLength; string type = _file[0].ContentType; string name = _file[0].FileName; //文件格式 string _tp = Path.GetExtension(name); if (_tp.ToLower() == ".jpg" || _tp.ToLower() == ".jpeg" || _tp.ToLower() == ".gif" || _tp.ToLower() == ".png" || _tp.ToLower() == ".swf") { Stream stream = _file[0].InputStream; Image image = Image.FromStream(stream); string dateDir = DateTime.Now.ToString("yyyyMMdd"); string saveName = ST.Tool.ExpandString.GetNonceNumberT(16) + _tp; string filePath = $"{BaseConfig.headpath}{_path}/{dateDir}/"; string path = Server.MapPath(filePath); if (!Directory.Exists(path)) Directory.CreateDirectory(path); //_file[0].SaveAs(Server.MapPath($"{filePath}{saveName}")); //初始化图片对象 //Image image = new Bitmap(Server.MapPath($"{filePath}{saveName}")); foreach (var p in image.PropertyItems) { if (p.Id == 0x112) { var rft = p.Value[0] == 6 ? RotateFlipType.Rotate90FlipNone : p.Value[0] == 3 ? RotateFlipType.Rotate180FlipNone : p.Value[0] == 8 ? RotateFlipType.Rotate270FlipNone : p.Value[0] == 1 ? RotateFlipType.RotateNoneFlipNone : RotateFlipType.RotateNoneFlipNone; p.Value[0] = 0; //旋转属性值设置为不旋转 image.SetPropertyItem(p); //回拷进图片流 image.RotateFlip(rft); } } //重新保存为正常的图片 image.Save(Server.MapPath($"{filePath}{saveName}")); result.Data = $"{filePath}{saveName}"; } else result.errorMsg = "只能上传图片。"; } else result.errorMsg = "未选择文件"; return result; } /// /// 上传多张图片 /// /// /// private rData> UpLoadPicArray(string _path = "public") { rData> result = new rData>(); result.Data = new List(); HttpFileCollectionBase _file = Request.Files; if (_file.Count > 0) for (int i = 0; i < _file.Count; i++) { //Thread.Sleep(500); long size = _file[i].ContentLength; string type = _file[i].ContentType; string name = _file[i].FileName; //文件格式 string _tp = Path.GetExtension(name); if (_tp.ToLower() == ".jpg" || _tp.ToLower() == ".jpeg" || _tp.ToLower() == ".gif" || _tp.ToLower() == ".png" || _tp.ToLower() == ".swf") { Stream stream = _file[i].InputStream; Image image = Image.FromStream(stream); string dateDir = DateTime.Now.ToString("yyyyMMdd"); string saveName = ST.Tool.ExpandString.GetNonceNumberT(16) + _tp; string filePath = $"{BaseConfig.headpath}{_path}/{dateDir}/"; string path = Server.MapPath(filePath); if (!Directory.Exists(path)) Directory.CreateDirectory(path); //_file[0].SaveAs(Server.MapPath($"{filePath}{saveName}")); //初始化图片对象 //Image image = new Bitmap(Server.MapPath($"{filePath}{saveName}")); foreach (var p in image.PropertyItems) { if (p.Id == 0x112) { var rft = p.Value[0] == 6 ? RotateFlipType.Rotate90FlipNone : p.Value[0] == 3 ? RotateFlipType.Rotate180FlipNone : p.Value[0] == 8 ? RotateFlipType.Rotate270FlipNone : p.Value[0] == 1 ? RotateFlipType.RotateNoneFlipNone : RotateFlipType.RotateNoneFlipNone; p.Value[0] = 0; //旋转属性值设置为不旋转 image.SetPropertyItem(p); //回拷进图片流 image.RotateFlip(rft); } } //重新保存为正常的图片 image.Save(Server.MapPath($"{filePath}{saveName}")); result.Data.Add($"{filePath}{saveName}"); //result.Data = $"{filePath}{saveName}"; } else result.errorMsg = "只能上传图片。"; } else result.errorMsg = "未选择文件"; return result; }

总结

以上所述是小编给大家介绍的基于Vue实现微信小程序的图文编辑器。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

微信小程序图文编辑器

猜你在找的微信小程序相关文章