一、KindEditor
KindEditor是一套開源的HTML可視化編輯器,主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果,兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。 KindEditor使用JavaScript編寫,可以無縫的與Java、.NET、PHP、ASP等程序接合。
KindEditor非常適合在CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用,2006年7月首次發(fā)布2.0以來,KindEditor依靠出色的用戶體驗和領(lǐng)先的技術(shù)不斷擴(kuò)大編輯器市場占有率,目前在國內(nèi)已經(jīng)成為最受歡迎的編輯器之一。
目前最新版本 KindEditor 3.5.2,官網(wǎng)及下載地址
KindEditor配置步驟:
1、在項目中建立KindEditor文件夾,把下載下來后的文件解壓,將其中的skins,plugins,kindeditor.js 拷到該KindEditor文件夾目錄下;
2、在.aspx文件中放入TextBox控件,并設(shè)置控件ID
如:<asp:TextBox ID="txtContent" TextMode="MultiLine" runat="server"></asp:TextBox>
3、在.aspx文件中引入kindeditor.js文件及Js代碼,可將TextBox控件設(shè)置成KindEditor在線編輯器,代碼如下:
01 | <script src= "../kindeditor/kindeditor.js" type= "text/javascript" ></script> |
02 | <script type= "text/javascript" > |
05 | imageUploadJson: '/handler/upload_json.ashx' , |
07 | 'source' , '|' , 'fullscreen' , 'undo' , 'redo' , 'print' , 'cut' , 'copy' , 'paste' , |
08 | 'plainpaste' , 'wordpaste' , '|' , 'justifyleft' , 'justifycenter' , 'justifyright' , |
09 | 'justifyfull' , 'insertorderedlist' , 'insertunorderedlist' , 'indent' , 'outdent' , 'subscript' , |
10 | 'superscript' , '|' , 'selectall' , '-' , |
11 | 'title' , 'fontname' , 'fontsize' , '|' , 'textcolor' , 'bgcolor' , 'bold' , |
12 | 'italic' , 'underline' , 'strikethrough' , 'removeformat' , '|' , 'image' , |
13 | 'flash' , 'media' , 'advtable' , 'hr' , 'emoticons' , 'link' , 'unlink' |
其中,id為TextBox控件的ID,imageUploadJson: '/handler/upload_json.ashx'可設(shè)置圖片上傳(文件上傳設(shè)置同理),item為設(shè)置編輯器工具欄上的每一個功能是否顯示,可根據(jù)需要手動增刪對應(yīng)單詞,如不需要“HTML代碼”功能則刪除“'source',”;
4、在.aspx頁面的第一句話及Page指令中加上validaterequest=”false”,禁止.net自動屏蔽上傳Html代碼;
如:<%@ Page Language="C#" ValidateRequest="false"...
5、設(shè)置完畢,后臺可直接通過TextBox的text屬性來獲取編輯器內(nèi)容;
另:設(shè)置KindEditor的圖片上傳功能
1、在剛才在.aspx頁面中添加的js代碼中添加imageUploadJson參數(shù),
如:imageUploadJson: '/handler/upload_json.ashx'
2、建立一般處理程序頁面upload_json.ashx,該頁面用于編寫文件上傳代碼,在下載下來的源碼有,在asp.net中,稍作修改,代碼如下:
02 | using System.Collections.Generic; |
05 | using System.Collections; |
07 | using System.Globalization; |
10 | namespace Yongbin.Shop.Web.handler |
15 | public class upload_json : IHttpHandler |
18 | private String savePath = "/upload/" + DateTime.Now.ToString( "yyyyMMdd" ) + "/" ; |
20 | private String saveUrl = "/upload/" + DateTime.Now.ToString( "yyyyMMdd" ) + "/" ; |
22 | private String fileTypes = "gif,jpg,jpeg,png,bmp" ; |
24 | private int maxSize = 1000000; |
26 | private HttpContext context; |
28 | public void ProcessRequest(HttpContext context) |
30 | this .context = context; |
32 | HttpPostedFile imgFile = context.Request.Files[ "imgFile" ]; |
38 | String dirPath = context.Server.MapPath(savePath); |
39 | if (!Directory.Exists(dirPath)) |
41 | Directory.CreateDirectory(dirPath); |
44 | String fileName = imgFile.FileName; |
45 | String fileExt = Path.GetExtension(fileName).ToLower(); |
46 | ArrayList fileTypeList = ArrayList.Adapter(fileTypes.Split( ',' )); |
48 | if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize) |
50 | showError( "上傳文件大小超過限制。" ); |
53 | if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(fileTypes.Split( ',' ), fileExt.Substring(1).ToLower()) == -1) |
55 | showError( "上傳文件擴(kuò)展名是不允許的擴(kuò)展名。" ); |
58 | String newFileName = DateTime.Now.ToString( "yyyyMMddHHmmss_ffff" , DateTimeFormatInfo.InvariantInfo) + fileExt; |
59 | String filePath = dirPath + newFileName; |
61 | imgFile.SaveAs(filePath); |
63 | String fileUrl = saveUrl + newFileName; |
65 | Hashtable hash = new Hashtable(); |
67 | hash[ "url" ] = fileUrl; |
68 | context.Response.AddHeader( "Content-Type" , "text/html; charset=UTF-8" ); |
69 | context.Response.Write(JsonMapper.ToJson(hash)); |
70 | context.Response.End(); |
73 | private void showError( string message) |
75 | Hashtable hash = new Hashtable(); |
77 | hash[ "message" ] = message; |
78 | context.Response.AddHeader( "Content-Type" , "text/html; charset=UTF-8" ); |
79 | context.Response.Write(JsonMapper.ToJson(hash)); |
80 | context.Response.End(); |
83 | public bool IsReusable |
3、配置成功
二、CkEditor
看過一個非官方非正式的關(guān)于.net在線編輯器的使用調(diào)查,CkEditor是被使用做多的,屬于重量級編輯器,功能很強(qiáng)大;
CKEditor是新一代的FCKeditor,是一個重新開發(fā)的版本。CKEditor是全球最優(yōu)秀的網(wǎng)頁在線文字編輯器之一,因其驚人的性能與可擴(kuò)展性而廣泛的被運用于各大網(wǎng)站。
(CKEditor 不具備上傳功能,需要集成 文件管理器CKFinder 才能實現(xiàn)上傳功能。)
我這里使用的版本是ckeditor_3.2及ckfinder_aspnet_1.4.3
未完待補(bǔ)充
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請
點擊舉報。