c#中富文本编辑器Simditor带图片上传的全部过程(项目不是mvc架构)

描述：最近c#项目中使用富文本编辑器Simditor，记录一下以便以后查看。

注：此项目不是MVC架构的。

1.引用文件

项目中引用相应的css和js文件，注意顺序不能打乱，否则富文本编辑器不会正常显示。

    <link rel="stylesheet" type="text/css" href="../styles/simditor.css" />
    
    <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"中的fileKey

public 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架构的项目）。

仅供参考，如有问题，望指出。

posted on 2018-01-25 17:51 永不言弃！阅读( ...) 评论( ...) 编辑收藏