NicEdit
NicEdit是一個(gè)輕量級(jí)，跨平臺(tái)的Inline Content Editor。NicEdit能夠讓任何 element/div變成可編輯或者能夠把標(biāo)準(zhǔn)的TextArea轉(zhuǎn)換成富文本編輯器。
主頁(yè): http://nicedit.com/
下載: http://nicedit.com/download.php
示例: http://nicedit.com/demos.php
NicEdit是我見(jiàn)過(guò)最輕量級(jí)的富文本編輯器，總共就一個(gè)JS文件和一張圖片
使用也非常簡(jiǎn)單，只需在頁(yè)面中添加簡(jiǎn)單的JS代碼就可以將TextBox或是TextArea控件轉(zhuǎn)換成富文本編輯器，代碼如下
- < 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 >
運(yùn)行效果如下
官網(wǎng)中的版本為英文版，而且字體設(shè)置也只能設(shè)置英文字體，我對(duì)英文版本做了簡(jiǎn)單的漢化，并且增加了幾種中文字體，如下圖
KindEditor
KindEditor是一套開(kāi)源的HTML可視化編輯器，主要用于讓用戶在網(wǎng)站上獲得所見(jiàn)即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。 KindEditor使用JavaScript編寫(xiě)，可以無(wú)縫的與Java、.NET、PHP、ASP等程序接合。這個(gè)是官網(wǎng)上的介紹。
主頁(yè)： http://www.kindsoft.net/index.php
下載： http://www.kindsoft.net/down.php
示例： http://www.kindsoft.net/demo.php
KindEditor相比較NicEditor涉及的文件要多很多，不過(guò)大小也才幾百K而已，下圖為文件結(jié)構(gòu)
- < 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 >
運(yùn)行效果如下
總結(jié)
選擇這兩款富文本編輯器的原因有
1 都是使用JS編寫(xiě)，這樣使用起來(lái)比較簡(jiǎn)單不用去引用DLL。
2 體積都很小。
3 都可以直接將現(xiàn)有的TextBox或是TextArea變成富文本編輯器。
NicEditor相比較KindEditor來(lái)說(shuō)還顯的不是很成熟。在我最近的一個(gè)需求中就有兩點(diǎn)沒(méi)有達(dá)到，最后選用了KindEdior。
1 TextBox的寬度只能設(shè)置成固定數(shù)值的寬度，如果設(shè)置成百分比，如100%，在有的瀏覽器中就會(huì)顯示有問(wèn)題。
2 貌似還沒(méi)有禁用編輯器的編輯功能，也有可能是我沒(méi)有找到設(shè)置的方法
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
