c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)
2018-01-25 17:51
417 查看
描述:最近c#项目中使用富文本编辑器Simditor,记录一下以便以后查看。
注:此项目不是MVC架构的。
因含有富文本所以必须进行编码escape,再传递到后台,否则会提示:从客户端(*****)中检测到有潜在危险的......(因为不是MVC框架,暂时无法用别的方式解决)
context.Request["describe"] //后台便可以获取该前端传递到后台的参数
以上是使用富文本编辑器Simditor在C#中带图片上传的全部过程(不是MVC架构的项目)。
仅供参考,如有问题,望指出。
注:此项目不是MVC架构的。
1.引用文件
项目中引用相应的css和js文件,注意顺序不能打乱,否则富文本编辑器不会正常显示。<link rel="stylesheet" type="text/css" href="../styles/simditor.css" /> <script type="text/javascript" src="../scripts/jquery.min.js"></script> <script type="text/javascript" src="../scripts/simditor/module.js"></script> <script type="text/javascript" src="../scripts/simditor/hotkeys.js"></script> <script type="text/javascript" src="../scripts/simditor/uploader.js"></script> <script type="text/javascript" src="../scripts/simditor/simditor.js"></script>
2.HTML中富文本的定义
<div > <h5>故障描述:</h5> <div class="view"> <textarea id="Describe"></textarea> </div> </div>
3.初始化富文本
注意的参数:textarea: $('#Describe'), //对应的html中富文本的ID。
url: '../handlersNew/MGuideData.ashx', //对应的服务器的地址。(文件上传的接口地址)
params: { type: "UploadPic" }, //以键值对的方式,传递给后台的参数,若无填写null即可
fileKey: 'fileDataFileName', //服务器获取文件数据的参数名
<script type="text/javascript"> var editor1; $(document).ready(function () { editor1 = new Simditor({ textarea: $('#Describe'), placeholder: '这里输入图文内容...', pasteImage: true, toolbar: ['title', 'fontScale', 'alignment', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent'], upload: { url: '../handlersNew/MGuideData.ashx', //文件上传的接口地址 params: { type: "UploadPic" }, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交 fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名 connectionCount: 3, leaveConfirm: '正在上传文件' } }); }); </script>
4.页面效果
页面中有“上传图片”和“外链图片”两个按钮供选择。5.C#后台保存图片代码
后台图片的保存代码,HttpContext.Current.Request.Files["fileDataFileName"]就是上面"3"中的fileKeypublic void ProcessRequest(HttpContext context) { //获取页面数据 string type = context.Request["type"]; if (type.Equals("UploadPic")) //富文本上传图片 { #region 富文本上传图片 HttpPostedFile file = HttpContext.Current.Request.Files["fileDataFileName"]; if (file != null) { //生成文件夹路径 string path = userName + "_" + DateTime.Now.Year + DateTime.Now.Month.ToString("D2") + DateTime.Now.Day.ToString("D2"); string strPath = System.Web.HttpContext.Current.Server.MapPath(string.Format("/Resource/Upload/{0}/", path)); //生成新的文件名+时间后缀 string fileName = Path.GetFileNameWithoutExtension(file.FileName); string FileEextension = Path.GetExtension(file.FileName); fileName = fileName + "-" + DateTime.Now.Year + "-" + DateTime.Now.Month + "-" + DateTime.Now.Day + "-" + DateTime.Now.Hour + "-" + DateTime.Now.Minute + FileEextension; //判断文件夹是否存在,若不存在则创建 if (!Directory.Exists(strPath)) Directory.CreateDirectory(strPath); //将2个字符串组合成一个路径 string filePath = Path.Combine(strPath, fileName); //保存操作 file.SaveAs(filePath); szJson = "{\"isSuccess\":1,\"msg\":\"上传成功。\"}"; } else szJson = "{\"isSuccess\":0,\"msg\":\"上传失败。\"}"; #endregion } }
6.Html前端页面的"保存"代码
前端页面获取富文本的数据用getValue,注意用post方式,因富文本含有大量数据,get方式会报错:提示url地址过长。因含有富文本所以必须进行编码escape,再传递到后台,否则会提示:从客户端(*****)中检测到有潜在危险的......(因为不是MVC框架,暂时无法用别的方式解决)
$.ajax({ type:"post", url: '../handlersNew/MGuideData.ashx', data: { // ... "describe": escape(editor1.getValue()), //编码 }, dataType: 'json', success: function (data) { if (data.isSuccess == 0) { //错误消息 // ... } else { //成功操作 // ... } } });
7.c#后端"保存"按钮
最后就是整个页面参数的后台保存操作。因情况不一,所以就不贴代码了。context.Request["describe"] //后台便可以获取该前端传递到后台的参数
8.页面展示富文本保存的数据
前端页面显示时,用setValue即可。因保存时编码了,所以页面显示数据必须进行解码unescape才能正常显示。
//解码显示 editor1.setValue(unescape(describe)); //故障描述
以上是使用富文本编辑器Simditor在C#中带图片上传的全部过程(不是MVC架构的项目)。
仅供参考,如有问题,望指出。
相关文章推荐
- C#中富文本编辑器Simditor带图片上传的全部过程(MVC架构的项目)
- ASP.NET MVC WebAPI 上传图片实例与实战计算BOM成本的存储过程
- JDBC基于MVC架构项目实例-实现对MySQL数据表的增删改查、调用数据表中的存储过程和函数
- webuploader结合c# mvc实现图片上传,删除,编辑回显
- Spring+SpringMVC+Mybatis整合百度富文本编辑器Ueditor,上传图片到阿里云OSS对象存储。
- c# winform项目treeview控件绑定本地电脑磁盘信息,浏览磁盘图片,上传本地图片控件
- 在项目中使用最新的ckeditor4.3.1的全过程+增加自己的上传本地图片按钮及将上传图片返回、保存
- ASP.NET\MVC 解决C#上传图片质量下降,图片模糊,水印有杂点的问题
- jqgrid编辑行时上传图片,使用webuploader结合c# mvc的方式
- ASP.NET MVC异步上传图片和富文本编辑器的使用详解
- ssm+maven项目中加入“百度富文本编辑器”,实现图片上传
- 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑
- CodeIgniter上传图片成功的全部过程分享
- ASP.NET MVC异步上传图片和富文本编辑器的使用详解
- 在VS2013 MVC项目中上传图片
- ASP.NET MVC异步上传图片和富文本编辑器的使用详解
- UEditor 富文本编辑器拓展之-----上传图片至项目之外或资源服务器
- react 中 使用 没有启用图片上传功能的simditor 富文本编辑器
- Flask学习10:Flask项目集成富文本编辑器CKEditor 上传图片
- 零废话VS2012 MVC3项目中javascript、C#实现图片上传