富文本編輯器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留言