亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

兩款富文本編輯器:NicEdit和Kindeditor

系統 2072 0
做過Web開發的朋友相信都使用過富文本編輯器,比較出名的 CuteEditor CKEditor 很多人應該已經使用過,在功能強大的同時需要加載的東西也變得很多。下面要推薦的兩款富文本編輯器都是使用JS編寫,使用簡單,非常輕量級。

NicEdit

  NicEdit是一個輕量級,跨平臺的Inline Content Editor。NicEdit能夠讓任何 element/div變成可編輯或者能夠把標準的TextArea轉換成富文本編輯器。

  主頁: http://nicedit.com/

  下載: http://nicedit.com/download.php

  示例: http://nicedit.com/demos.php

  NicEdit是我見過最輕量級的富文本編輯器,總共就一個JS文件和一張圖片

  使用也非常簡單,只需在頁面中添加簡單的JS代碼就可以將TextBox或是TextArea控件轉換成富文本編輯器,代碼如下

  1. < span style = "font-family:MicrosoftYaHei;" > < head runat = "server" >
  2. < title > </ title >
  3. </ head >
  4. < body >
  5. < form id = "form1" runat = "server" >
  6. < script src = "../JS/Eidtor/nicEdit.js" type = "text/javascript" > </ script >
  7. < script type = "text/javascript" >
  8. bkLib.onDomLoaded(function(){
  9. newnicEditor({fullPanel:true}).panelInstance('txtContent');
  10. });
  11. </ script >
  12. < asp:TextBox runat = "server" ID = "txtContent" TextMode = "MultiLine" Height = "200px" Width = "600px" > </ asp:TextBox >
  13. </ form >
  14. </ body >
  15. </ html > </ span >


運行效果如下

兩款富文本編輯器:NicEdit和Kindeditor

官網中的版本為英文版,而且字體設置也只能設置英文字體,我對英文版本做了簡單的漢化,并且增加了幾種中文字體,如下圖

兩款富文本編輯器:NicEdit和Kindeditor

中文本下載

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而已,下圖為文件結構

兩款富文本編輯器:NicEdit和Kindeditor

  1. < span style = "font-family:MicrosoftYaHei;" > < html xmlns = "http://www.w3.org/1999/xhtml" >
  2. < head runat = "server" >
  3. < title > </ title >
  4. </ head >
  5. < body >
  6. < form id = "form1" runat = "server" >
  7. < script charset = "utf-8" src = "../JS/KindEditor/kindeditor-min.js"
  8. type = "text/javascript" > </ script >
  9. < script type = "text/javascript" charset = "utf-8" >
  10. KE.show({
  11. id:'txtContent',
  12. resizeMode:1,
  13. allowPreviewEmoticons:false,
  14. allowUpload:false,
  15. });
  16. </ script >
  17. < textarea cols = "60" id = "txtContent" style = "width:600px;height:300px;" runat = "server"
  18. readonly = "readonly" > </ textarea >
  19. </ form >
  20. </ body >
  21. </ html > </ span >


運行效果如下

兩款富文本編輯器:NicEdit和Kindeditor

總結

  選擇這兩款富文本編輯器的原因有
    1 都是使用JS編寫,這樣使用起來比較簡單不用去引用DLL。

    2 體積都很小。

    3 都可以直接將現有的TextBox或是TextArea變成富文本編輯器。

  NicEditor相比較KindEditor來說還顯的不是很成熟。在我最近的一個需求中就有兩點沒有達到,最后選用了KindEdior。

    1 TextBox的寬度只能設置成固定數值的寬度,如果設置成百分比,如100%,在有的瀏覽器中就會顯示有問題。

    2 貌似還沒有禁用編輯器的編輯功能,也有可能是我沒有找到設置的方法

兩款富文本編輯器:NicEdit和Kindeditor


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 欧美精品一区二区三区视频 | 99视频有精品视频免费观看 | 精品国产福利在线观看一区 | 亚洲a毛片| 国产精品久久久亚洲动漫 | 黄色网址在线免费 | 国产精品一区二区三区久久 | 久久精品亚洲综合 | 国产在线观看91精品一区 | 91精品国产乱码在线观看 | 久久精品色 | 成人免费观看网站 | 青草娱乐极品免费视频 | 天天久久狠狠色综合 | 久久久国产精品网站 | 色视频网站在线观看 | 久久久久久久男人的天堂 | 日本视频一区二区三区 | 99精品福利视频 | 天天干夜夜撸 | 久久久国产亚洲精品 | 国产最新精品精品视频 | 久久久久久久一线毛片 | 国内精品美女久久久久 | 成人网18免费视频 | 手机看片日韩日韩 | 日韩城人免费 | 久久高清免费 | 欧美成 人激情视频 | 久青草视频在线播放 | 国产精品123区 | 99热久久国产精品这 | 欧美图片一区二区三区 | 伊人久久大杳蕉综合大象 | 亚洲va久久久噜噜噜久久男同 | 免费一区二区三区久久 | 免费视频网站一级人爱视频 | 久久精品66 | 国产精品成人扳一级aa毛片 | 99国产精品久久久久久久日本 | 久久综合一区 |