說得簡單點,在線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里面最懂畫畫的,搞文字里面最懂程序的,最終一事無成,博而不精,徒留一堆手記。從菜鳥角度寫手記,同樣的”白”更易懂,你值得擁有!感興趣的,請別忘點右角關注菜鳥手記。
著編程的普及,越來越多的人開始參與到代碼的編寫當中。很多時候,你并需要很多專業知識,你就可以寫出非常出色軟件,而這一切都得益于很多低代碼編程工具,這些拖拽工具可以非常方便地讓你生成頁面,甚至是獲取數據。接下來我們就來盤點一下可視化代碼生成工具。
一款非常出色的代碼拖拽生成工具,它有著豐富的模板庫,對于初學者來說,你可以從眾多優秀的模板庫中選擇一款來開始自己的網頁設計之旅。
Wix支持對SEO的優化,你可以通過各種標簽來優化你的網頁,可以讓你的網頁被搜索引擎認可。
Wix是支持移動端的,并且它是自適應的,也就說當你設計好網頁的時候,你可以花費很少的調整就生成移動端的網頁。
Wix內置豐富的特效,你可以非常方便地為網頁添加各種動效,讓網頁看起來更活潑。
site123是一個非常簡潔的網頁生成器,使用它你可以拖拽生成一個網頁。
使用site123生成一個網站僅僅需要三個步驟,首先,選擇網站的類型,然后,上傳內容,最后,發布自己的網頁就完成了一個簡單網站的制作。
site123的模板都是響應式的,也就說它會自動適應移動端,讓你的網站在移動端也有最佳的閱讀體驗,此外,site123還會自動優化你的網頁,讓你的網頁更容易被搜索引擎所收錄。
所有的操作都是在網頁上完成的,不需要你下載任何軟件就可以非常方便地生成一個網頁。
這是一個富有創意的網頁生成器,它有著豐富的模板,有趣的是,你可以通過描述你想要的網站是做什么的來提供給你模板,也就是說,你告訴它你想要做一個什么樣子的網站,是博客,是商城,是餐館,還是服務,你告訴它你想要做的內容,它就會給你返回最佳的模板。
使用Squarespace你可以非常方便地創建頁面,可以非常方便地調整樣式,字體,顏色,按鈕樣式,動效,你都可以通過點擊進行選擇,可以說自定義的功能還是很強大的。
當使用 Squarespace 創建網站時,你還可以獲得免費的無限托管、頂級的安全性和可靠的資源。 你還可以通過電子郵件、實時聊天或加入實時網絡研討會獲得全天候的個性化支持。
一款非常小清新的網頁生成器,它可以使網頁設計變得非常簡單。選擇模板,拖放新元素,更改顏色、字體、圖像等都可以輕松完成,你也可以輕松編輯所有內容。
它對電子商務進行了特殊的支持,使用多合一電子商務平臺來建立的商店支持在線銷售。同時,你也可以讓您的產品在您的在線商店、Facebook、Instagram 和亞馬遜上可用。
無論是庫存、運輸,甚至是稅收,它提供的自動化工具都會為您完成繁重的工作。
Zyro 電子商務是所有最流行的支付方式。從 PayPal 和 Visa 到萬事達卡等,接受來自全球各地的在線支付。
此外,它還提供了很多實用的小功能,比如名稱生成器,標語生成器,圖像智能縮放,升頻,智能去背景等等。
Elementor 與此列表中的其他所有內容不同,原因很簡單: 它不是獨立的站點構建器。它是一個 WordPress 插件,它需要一個 WordPress 站點才能運行。
Elementor 允許您像完整的拖放式網站構建器一樣使用 WordPress(主要用于博客和發布的內容管理系統)。它包括頁面模板、內容塊和小部件。它具有響應式的設計和令人難以置信的定制能力。
基本上,您只需將預制的小部件拖放到您的頁面上。這些小部件可以是簡單的文本或圖像塊,但它們也可以是投資組合、畫廊、菜單、列表、地圖、Facebook 評論——你可以命名它。
一個在線生成h5頁面并提供頁面管理和頁面編輯的平臺,用于快速制作H5頁面。用戶無需掌握復雜的編程技術,通過簡單拖拽、少量配置即可制作精美的頁面,可用于營銷場景下的頁面制作。
它的主要技術棧是VUE,代碼在碼云上開源。
它的主要優點有:
一個開源的網頁拖拽自動生成的JavaScript庫,你可以以簡單拖拽的方式生成自己需要的網頁樣式,內置jquery和Bootstrap,你可以拖拽相關的組件進行網頁的構建,非常的方便,而且可以實時修改代碼,功能豐富,使用簡單,界面友好,特別適合一些專注于展示的網頁設計。
它的技術棧采用的是jquery和bootstrap,雖然jquery可能會有些落伍,但是它主要是用在頁面的拖拽布局上,不會影響網頁的js。
它的優點:
它是一款面向IT技術支持人員和專業程序員的低代碼開發工具,可以通過組件化、可視化、模板化和向導化等多種手段,快速構建數據庫增刪改查類的Web和手機H5應用,大幅提升開發效率。
相對于現在市面上很多類似OA系統的、以表單和流程為核心的低代碼開發平臺,TaskBuilder 能實現更復雜的業務應用,簡單的功能通過向導一步一步操作即可實現,復雜的功能可以通過編寫腳本實現。
和其它拖拽網站生成器不同的是,它并沒有提供豐富的模板,而且它設計的最初目的也不是為了制作絢麗的前端頁面,它更多地是考慮制作企業后臺管理界面,制作類似ERP,CRM,OA等流程管理系統。
它是免費開源的,代碼可以在github上進行查看,它的技術棧采用的是JS,前端是JS,后端是nodejs,可以說是國產開源軟件中不錯的一款產品。
面對各種網站生成器,很多人會覺得眼花繚亂,不知道選擇哪一種,其實有時間你可以下載下來體驗一下,每個軟件花費個半小時就能體驗到它的精髓。
每一款軟件都有它解決的痛點,否則就不會有這么多款類似的產品誕生了。
以后的開發會分為兩種,一種是制作開發工具的,一種是使用開發工具的,制作開發工具的人會要求越來越高,而使用工具的人會要求越來越低,軟件開發不再只是程序員能做的一件事。
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編輯器。
本站文章除注明轉載外,均為本站原創或翻譯
*請認真填寫需求信息,我們會在24小時內與您取得聯系。