NicEdit
NicEdit是一個輕量級，跨平臺的Inline Content Editor。NicEdit能夠讓任何 element/div變成可編輯或者能夠把標準的TextArea轉換成富文本編輯器。
下載: http://nicedit.com/download.php
示例: http://nicedit.com/demos.php
NicEdit是我見過最輕量級的富文本編輯器，總共就一個JS文件和一張圖片
使用也非常簡單，只需在頁面中添加簡單的JS代碼就可以將TextBox或是TextArea控件轉換成富文本編輯器，代碼如下
- < span style = "font-family:MicrosoftYaHei;" > < head runat = "server" >
- < title > </ title >
- </ head >
- < body >
- < form id = "form1" runat = "server" >
- < script src = "../JS/Eidtor/nicEdit.js" type = "text/javascript" > </ script >
- < script type = "text/javascript" >
- bkLib.onDomLoaded(function(){
- newnicEditor({fullPanel:true}).panelInstance('txtContent');
- });
- </ script >
- < asp:TextBox runat = "server" ID = "txtContent" TextMode = "MultiLine" Height = "200px" Width = "600px" > </ asp:TextBox >
- </ form >
- </ body >
- </ html > </ span >
運行效果如下
官網中的版本為英文版，而且字體設置也只能設置英文字體，我對英文版本做了簡單的漢化，并且增加了幾種中文字體，如下圖
KindEditor
KindEditor是一套開源的HTML可視化編輯器，主要用于讓用戶在網站上獲得所見即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。 KindEditor使用JavaScript編寫，可以無縫的與Java、.NET、PHP、ASP等程序接合。這個是官網上的介紹。
主頁： http://www.kindsoft.net/index.php
下載： http://www.kindsoft.net/down.php
示例： http://www.kindsoft.net/demo.php
KindEditor相比較NicEditor涉及的文件要多很多，不過大小也才幾百K而已，下圖為文件結構
- < span style = "font-family:MicrosoftYaHei;" > < html xmlns = "http://www.w3.org/1999/xhtml" >
- < head runat = "server" >
- < title > </ title >
- </ head >
- < body >
- < form id = "form1" runat = "server" >
- < script charset = "utf-8" src = "../JS/KindEditor/kindeditor-min.js"
- type = "text/javascript" > </ script >
- < script type = "text/javascript" charset = "utf-8" >
- KE.show({
- id:'txtContent',
- resizeMode:1,
- allowPreviewEmoticons:false,
- allowUpload:false,
- });
- </ script >
- < textarea cols = "60" id = "txtContent" style = "width:600px;height:300px;" runat = "server"
- readonly = "readonly" > </ textarea >
- </ form >
- </ body >
- </ html > </ span >
運行效果如下
總結
選擇這兩款富文本編輯器的原因有
1 都是使用JS編寫，這樣使用起來比較簡單不用去引用DLL。
2 體積都很小。
3 都可以直接將現有的TextBox或是TextArea變成富文本編輯器。
NicEditor相比較KindEditor來說還顯的不是很成熟。在我最近的一個需求中就有兩點沒有達到，最后選用了KindEdior。
1 TextBox的寬度只能設置成固定數值的寬度，如果設置成百分比，如100%，在有的瀏覽器中就會顯示有問題。
2 貌似還沒有禁用編輯器的編輯功能，也有可能是我沒有找到設置的方法
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
