整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
說得簡單點，在線HTML編輯器就是在網上發帖子、寫博客的那個帶編輯功能的框框，可以進行圖文排版等操作。
當年本菜鳥做網站的時候，曾經自己用javascript編寫過一個比較簡單的在線HTML編輯器，用于文本內容的排版。但是因為水平有限，很多功能都無法實現。后來有了eWebEditor，功能確實強大，但這個編輯器是個收費的軟件，并且正因為功能強大，也就顯得過重，一些輕量的場合不是太適用。那有沒有既免費、又功能強大、還能適應輕量場合的在線HTML編輯器呢？
答案肯定是有的。這首先要感謝這些年來有一批奉獻精神的程序猿們不斷推進共享軟件的開發，讓我們得以享受他們的成果。
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協議，允許自由使用和修改代碼。特別要說的是，頭條號后臺發布文章的編輯器就是用的UEditor!
百度UEditor
UEditor還有一個輕量版的，叫做UMeditor，簡稱UM。UM是為滿足廣大門戶網站對于簡單發帖框，或者回復框需求所定制的在線HTML編輯器。 主要特點是容量和加載速度上的改變，主文件的代碼量為139k，而且放棄了使用傳統的iframe模式，采用了div的加載方式， 以達到更快的加載速度和零加載失敗率。UM的第一個使用者是百度貼吧，以經受貼吧每天幾億的pv的考驗，功能設計應當是最優化的了。 當然隨著代碼的減少，UM的功能對于UE來說還是有所減少，但也有增加，比如拖拽圖片上傳，chrome的圖片拖動改變大小等。
百度UEditor界面
xhEditor是一個基于jQuery開發的簡單迷你并且高效的可視化HTML編輯器，基于網絡訪問并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。
xhEditor完全基于Javascript開發，可以應用在任何的服務端語言環境下，例如：PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、論壇、商城等互聯網平臺上完美的嵌入運行，能夠非常靈活簡單的和您的系統實現完美的無縫銜接。
主要特點：
精簡迷你：初始加載4個文件，包括：1個js(50k)+2個css(10k)+1個圖片(5k)，總共65k。若js和css文件進行gzip壓縮傳輸，可以進一步縮減為24k左右。
使用簡單：簡單的調用方式，加一個class屬性就能將textarea變成一個功能豐富的可視化編輯器。
無障礙訪問：提供WAI-ARIA全面支持，全鍵盤精細操作，全程語音向導，提供完美無障礙訪問體驗，充分滿足殘疾人的上網需求。
內置Ajax上傳：內置強大的Ajax上傳，包括HTML4和HTML5上傳支持(多文件上傳、真實上傳進度及文件拖放上傳)，剪切板上傳及遠程抓取上傳。
Word自動清理：實現Word代碼自動檢測并清理，生成代碼最優化精簡，卻不丟失細節效果。
UBB可視化編輯：支持UBB可視化編輯，在獲得安全高效代碼存儲的同時，又能享受可視化編輯的便捷。
KindEditor 也是一個開源的在線HTML編輯器， 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用。本菜鳥感覺這個編輯器上手比較容易，功能也很強大，界面比較友好，很適合菜鳥使用。可惜的是最近好像停止更新了，官網好象也能不正常訪問。
KindEditor界面
主要特點：
快速：體積小，加載速度快
開源：開放源代碼，高水平，高品質
底層：內置自定義 DOM 類庫，精確操作 DOM
擴展：基于插件的設計，所有功能都是插件，可根據需求增減功能
風格：修改編輯器風格非常容易，只需修改一個 CSS 文件
兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera
嚴格來說，KISSY不僅僅是一個在線HTML編輯器，而是由阿里集團前端工程師們發起創建的一個開源 JS 框架，具有跨終端、模塊化、使用簡單的特點。里面帶有HTML編輯器這個模塊。
阿里的KISSY
正因為KISSY采取模塊化設計，因此具有高擴展性、組件齊全，接口一致、自主開發、適合多種應用場景等優點。KISSY 除了完備的工具集合諸如 DOM、Event、Ajax、Anim 等，KISSY 還面向團隊協作做了獨特設計，提供了經典的面向對象、動態加載、性能優化解決方案。作為一款全終端支持的 JavaScript 框架，KISSY還 為移動終端做了大量適配和優化，搞移動web開發的可以好好研究一下KISSY的運用。
關于菜鳥手記：
菜鳥最怕就是看大神的攻略，全是術語看頭就頭大！本人作為一名對啥都感興趣的資深菜鳥，潛心研究各類技術二十余年，做網站、寫程序、搞美工、練書法、學畫畫、作文章、抓管理、裝逼格，屬于搞IT里面最懂美工的，搞HR里面最懂畫畫的，搞文字里面最懂程序的，最終一事無成，博而不精，徒留一堆手記。從菜鳥角度寫手記，同樣的”白”更易懂，你值得擁有！感興趣的，請別忘點右角關注菜鳥手記。
inymce是一個免費的WYSIWYG HTML編輯器，由JavaScript寫成。它是一個根據LGPL license發布的自由軟件。Tinymce可以將文本區轉換為富文本HTML編輯器，并可以嵌入到PHP腳本。
NicEdit是一款輕量級的、跨平臺的編輯器，具有強大的功能來編輯HTML內容。NicEdit能夠讓任何 element/div變成可編輯或者能夠把標準的TextArea轉換成富文本編輯器。
Free BBCode Editor是一款免費的WYSIWYG BBCode編輯器，可以插入到任何PHP腳本中。
OpenWebWare是一個跨瀏覽器，純JavaScript開發，強大開源的WYSIWYG編輯器。支持多種瀏覽器和Web編程語言：PHP，ASP，ASP.net，Perl，Java，Cold Fusion。
Wyzz是一款基于GPL的免費WYSIWYG編輯器。
widgEditor是一款輕量的、快速加載的富文本HTML WYSIWYG編輯器。它根據LGPL license發布。 widgEditor編輯器的外觀是比較個性的，尤其是文本域上邊的控制按鈕，比較與眾不同。
MarkitUp是一個輕量級，可定制，靈活的WYSIWYG Editor，可實現非常強大的在線文本編輯器功能。可支持html、Wiki、BBScode等編輯格式，具體很強的擴展性，使用非常方便。
TextAreaRich是一款免費的、基于JavaScript的WYSIWYG編輯器 .它可以集成到Web應用程序的PHP或ASP腳本中。
WYMeditor 是一個開源的、基于Web瀏覽器的可視化HTML編輯器。
本站文章除注明轉載外，均為本站原創或翻譯
天繼續推薦提高我們摸魚時間的幾個神器，相信我，你會愛上他們的。
地址：https://neumorphism.io/
這個網站為 section 或 div 生成對應UI，它也可以自定義border-radius, box-shadow 等。
地址：https://shadows.brumm.af/
它可以為我們生成多個分層陰影，一種非常酷的效果，也可以從曲線中自定義顏色。
地址：https://bennettfeely.com/clippy/
這個算是我用的最多的，早期錄的CSS視頻，很多復雜點的效果都是用這個工具幫我生成，前列推薦。
地址：https://9elements.github.io/fancy-border-radius/#30.36.29.30--.
它通過操作 border-radius 生成很 awesome 形狀，我們可以在項目中盡情的使用的，通過微調來達到我們想要的形狀。
地址：https://cubic-bezier.com/
為 CSS 動畫生成cubic-bezier。
地址：https://cssgradient.io/
如果你的項目經常需要使用漸變，那么，你會愛上這個網站。我用了很長時間，它非常完美。在這里你也可以使用一些工具，比如漸變按鈕等等。
下面這三個波浪生成器可以生成任何類型的波浪，還在為畫破浪而苦惱的小伙伴可以用起來了。
地址：https://getwaves.io/
它能生成簡單的波浪，并有一些自定義功能。
地址：https://www.softr.io/tools/svg-wave-generator
它可以產生多個漸變波，非常棒。
地址：https://svgwave.in/
它可以生成多個漸變波浪，但主要特點是它還可以為此生成實時動畫。
地址：https://cssgrid-generator.netlify.app/
它為網格生成了很棒的css，你可以用div來定制它，它還會為它創建子元素。
它可以生成網格區域。我們可以根據具體需要來命名和定制區域。
地址：https://loading.io/
這個網站可以生成多個加載動畫，并以SVG、GIF、PNG和其他格式下載，但它的最大特點是你可以將這些動畫定制到新的水平。
地址：https://www.flaticon.com/
這個庫有5.7M+矢量圖標。可以在這里找到任何可能的圖標，你可以使用它。
地址：https://icons8.com/
這個庫也有大量的圖標，你可以定制它們，也可以直接使用圖標，而無需下載它。
希望你從這篇文章中學到了一些東西，如果有的話，請來波贊被。
~~完，我是刷碗，勵志等退休后，要回家擺地攤的人，我們下期見！
作者：Jatin Sharma 譯者：前端小智 來源：dev 原文：https://dev.to/j471n/10-css-resources-that-you-should-bookmark-46l6
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
