富文本编辑器Simditor的简易使用

最近打算自己做一个博客系统，并不打算使用帝国cms或者wordpress之类的做后台管理！自己处于学习阶段也就想把从前台到后台一起谢了。好了，废话不多说了，先来看看富文本编辑器SimDitor，这里是地址，由于里面有些demo和代码实例，我就不再赘述了。直接到官网下载到zip包，解压会有下面的东西

　　我们将这些东西全部引入我们的项目中，在自己的html页面引入，大致如下

　　初始化SimDitor只用在html页写一个textarea标签和javascript写入初始化就行了

　　var editor = new Simditor({ textarea:$('#Editor')});

　　注意，上面引入的js文件顺序不同的话可能导致页面不能完全初始化。

　　如此美丽的富文本编辑器看到就想摸两下，呵呵。

　　这里是初始化好了，这里问题来了，就是图片问题。SimDitor提供了图片上传功能，在设置的时候讲upload设置为键值对就行了，详情见官网。大致的东西就是一个后台处理程序的接口（一般采用一般处理程序ASHX处理【asp.net】）,我们来看看需要上传功能的SimDitor初始化

$(function () {

       //var editor = new Simditor({ textarea:$('#Editor')});

       toolbar = ['title', 'bold', 'italic','underline', 'strikethrough',

           'color','|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',

           'link','image', 'hr', '|', 'indent', 'outdent'];//设置工具栏

       var editor = new Simditor({

           textarea:$('#Editor'),

          placeholder: '这里输入内容...',

           toolbar:toolbar,  //工具栏

          defaultImage: '/Content/SimDetor/images/image.png',//编辑器插入图片时使用的默认图片

           upload:{

              url: 'Api/UploadImg.ashx',//文件上传的接口地址

              params: null,//键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交

              fileKey: 'fileDataFileName',//服务器端获取文件数据的参数名

              connectionCount: 3,

              leaveConfirm: '正在上传文件'

           }

       });

    });

　　

　　我们通过后台的处理文件就可以实现图片上传啦，后台要求返回一个json字符串，其中必须包括success和file_path这两个东西，file_path一定不能错，错了会显示‘上传出错了’，看代码

public void ProcessRequest(HttpContextcontext)

       {

          context.Response.Charset="UTF-8";

          context.Response.ContentType="text/plain";

           var files= context.Request.Files;

           stringtimeString=DateTime.Now.ToString("yyyyMMdd/");

           stringuploadFilePath = HttpContext.Current.Server.MapPath("/upload/") +timeString;

           if(!Directory.Exists(uploadFilePath))

           {

             Directory.CreateDirectory(uploadFilePath);//如果不存在，则创建

           }

          files[0].SaveAs(uploadFilePath +System.IO.Path.GetFileName(files[0].FileName));

           stringimgurl = "/upload/"+timeString +System.IO.Path.GetFileName(files[0].FileName);

           string msg= "{\"success\":\"" + true + "\",\"file_path\":\"" + imgurl +"\"}";

          context.Response.Write(msg);

          context.Response.End();

       }

　　

　　这里没有对上传的文件类型做判断，朋友们自己写咯。好了，完整的运行效果如下

‘

　　如有疑问，欢迎访问seesharply.com留言