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

兩款富文本編輯器: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條評論
主站蜘蛛池模板: 日韩 在线视频精品 | 91国内精品视频 | 高清一区高清二区视频 | 久久99精品久久 | 日本不卡中文字幕 | 九色国产在视频线精品视频 | 亚洲精品国产成人中文 | 国产亚洲欧美一区二区三区 | 亚洲人成依人成综合网 | 国产成人一区二区三区视频免费蜜 | 久操不卡 | 偷偷操99 | 亚洲婷婷在线 | 国产精品一区二区四区 | 五月婷婷激情视频 | 日本免费的一级v一片 | 综合色婷婷 | 99久久亚洲 | 91久久精品日日躁夜夜躁欧美 | 亚洲欧美日韩综合一区久久 | 国产男女在线观看 | 第一福利影院 | 久草在线影| 兽王高清完整在线观看 | 天天草比 | 国产精品久久久久久一区二区三区 | 日日操干 | 97在线视频免费播放 | 国产精品一区在线免费观看 | 阿v天堂2017 啊用力嗯快国产在线观看 爱爱99 | 国产精品久久久久久久久久影院 | 劲爆激情欧美毛片 | 欧美成人h版影片在线观看 欧美成人h精品网站 | 亚洲日本久久久午夜精品 | 久久久久久久久66精品片 | 亚洲午夜久久久精品影院视色 | 久久久国产一区二区三区 | 老司机深夜福利影院 | 国产精品久久久久久久毛片 | 精品视频一区在线观看 | 亚洲国产日产韩国欧美综合 |