10个最好的 jQuery 和 HTML5 WYSIWYG 插件

1. Froala

Froala WYSIWYG HTML Editor is easy to integrate and to use. It requires minimal coding knowledge. It requires jQuery 1.11.0 or higher and the iconic font named Font Awesome 4.4.0 . In combination with all the UI and UX features it has, it also comes with a strong defence mechanism against XSS attacks.

Highlights

• 34 KB gzipped
• Inline editing
• Keyboard shortcuts are available
• Requires basic HTML and JavaScript knowledge
• Dark and light theme (can be customised by editing LESS file)
• Optimised for mobile
• MS-Word friendly
• 34 languages are supported including RTL(Right To Left) support

2. ContentTools

ContentTools is a small and beautiful content editor. The library doesn’t use any JavaScript framework or library (not even jQuery) but plays nicely with any of them. The ContentTools package is made up of 5 libraries, each of which can be used independently. It’s designed to be easy to extend.

Highlights

• 49 KB gzipped
• Inline editing
• Resizing images and videos
• supports undo/redo

3. Raptor Editor

Raptor Editor is an open source JavaScript WYSIWYG HTML editor designed to be user-friendly and easy to integrate and customise. It is designed for inline editing and is ideal for complex multi-block layouts. It uses the latest technologies including HTML5 ContentEditable and jQuery features including built-in unit tests and a modular, extensible code base and plugin API.

Highlights

• Inline editing support
• Flexible docking options
• Customisable theme
• Well documented

4. Aloha

Aloha Editor is a functional content editing library. It allows you to create editing experiences embedded seamlessly in your web application. The major con is that it still doesn’t support image insertion.

Highlights

• 142KB size
• MS-Word friendly
• Cross browser compatibility
• Customisable

5. TinyMCE

TinyMCE is a platform independent web-based JavaScript HTML WYSIWYG. It enables you to convert HTML textarea fields or other HTML elements to editor instances. You can upload and manage files on Microsoft Azure, Google Drive, Amazon S3, DropBox and more. It follows the WAI-ARIA specification, making it compatible with screen readers such as JAWS and NVDA. There is also an enterprise solution in which you get prioritized support.

Highlights

• Live media embedding
• Built-in image editing
• Spell check (enterprise)
• MS-Word friendly
• 40+ languages support
• Robust Cross-Browser Performance

6. bootstrap3-wysiwyg

bootstrap3-wysiwyg is a JavaScript plugin that makes it easy to create simple, beautiful WYSIWYG editors with the help ofwysihtml5 and 推ter Bootstrap.

Highlights

• 206 KB minified
• RequireJS support
• Custom template for toolbar
• Custom themes are available
• Exposes events like load and blur

7. Summernote

Summernote is a text editor based on Bootstrap. There are various themes available for it and they are powered by Bootswatch. There is also a version converted to Material theme named MaterialNote

Highlights

• 80 KB JS+CSS
• Supports Bootstrap 3.x.x
• Can be easily integrated with Django, Rails or Angular
• Easily customisable
• CodeMirror integration

8. CKEditor

CKEditor is a ready-to-use HTML text editor designed to simplify web content creation. It brings common word processor features directly to your web pages.

Highlights

• Customised build using CKBuilder
• MS Word friendly
• Inline editing
• Undo/redo support
• RTL support
• Supports around 60 languages

9. Trumbowyg

Trusmbowyg is the lightest of all the editors listed here. While all existing WYSIWYG editors are larger than 45kB, Trumbowyg is only 16 KB . It depends on jQuery >= 1.7.

Highlights

• Only 16 KB
• 30+ Localisations

10. Redactor

Redactor is a fast, powerful and extendible editor with a quality support team. It has been around for the last 7 years and is under active development. It also automatically uploads the images to Amazon S3.

Highlights

• 75 KB minified
• Inline text editing
• CodeMirror support
• Drag and drop functionality for images
• Since the editor is plugin-based, it can be easily extended.

Conclusions

In this article I’ve shown you what I think are 10 of the very best jQuery and HTML5 WYSIWYG plugins. I hope this this list will help you in choosing a good text editor for your project and save some time finding the plugin that best fits your needs.

Ritesh Kumar

</div>

Ritesh is a web designer and developer having a degree in electrical engineering from IIT Roorkee. He loves learning about the new web technologies and getting familiar with new people. When he is not coding, you can find him playing video games.

</div>

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

</div>

CountryAfghanistanAlbaniaAlgeriaAmerican SamoaAndorraAngolaAnguillaAntarcticaAntigua and BarbudaArgentinaArmeniaArubaAustraliaAustriaAzerbaijanBahamasBahrainBangladeshBarbadosBelarusBelgiumBelizeBeninBermudaBhutanBoliviaBosnia and HerzegowinaBotswanaBouvet IslandBrazilBritish Indian Ocean TerritoryBrunei DarussalamBulgariaBurkina FasoBurundiCambodiaCameroonCanadaCape VerdeCayman IslandsCentral African RepublicChadChileChinaChristmas IslandCocos (Keeling) IslandsColombiaComorosCongoCongo, the Democratic Republic of theCook IslandsCosta RicaCote d'IvoireCroatia (Hrvatska)CubaCyprusCzech RepublicDenmarkDjiboutiDominicaDominican RepublicEast TimorEcuadorEgyptEl SalvadorEquatorial GuineaEritreaEstoniaEthiopiaFalkland Islands (Malvinas)Faroe IslandsFijiFinlandFranceFrance MetropolitanFrench GuianaFrench PolynesiaFrench Southern TerritoriesGabonGambiaGeorgiaGermanyGhanaGibraltarGreeceGreenlandGrenadaGuadeloupeGuamGuatemalaGuineaGuinea-BissauGuyanaHaitiHeard and Mc Donald IslandsHoly See (Vatican City State)HondurasHong KongHungaryIcelandIndiaIndonesiaIran (Islamic Republic of)IraqIrelandIsraelItalyJamaicaJapanJordanKazakhstanKenyaKiribatiKorea, Democratic People's Republic ofKorea, Republic ofKuwaitKyrgyzstanLao, People's Democratic RepublicLatviaLebanonLesothoLiberiaLibyan Arab JamahiriyaLiechtensteinLithuaniaLuxembourgMacauMacedonia, The Former Yugoslav Republic ofMadagascarMalawiMalaysiaMaldivesMaliMaltaMarshall IslandsMartiniqueMauritaniaMauritiusMayotteMexicoMicronesia, Federated States ofMoldova, Republic ofMonacoMongoliaMontserratMoroccoMozambiqueMyanmarNamibiaNauruNepalNetherlandsNetherlands AntillesNew CaledoniaNew ZealandNicaraguaNigerNigeriaNiueNorfolk IslandNorthern Mariana IslandsNorwayOmanPakistanPalauPanamaPapua New GuineaParaguayPeruPhilippinesPitcairnPolandPortugalPuerto RicoQatarReunionRomaniaRussian FederationRwandaSaint Kitts and NevisSaint LuciaSaint Vincent and the GrenadinesSamoaSan MarinoSao Tome and PrincipeSaudi ArabiaSenegalSeychellesSierra LeoneSingaporeSlovakia (Slovak Republic)SloveniaSolomon IslandsSomaliaSouth AfricaSouth Georgia and the South Sandwich IslandsSpainSri LankaSt. HelenaSt. Pierre and MiquelonSudanSurinameSvalbard and Jan Mayen IslandsSwazilandSwedenSwitzerlandSyrian Arab RepublicTaiwan, Province of ChinaTajikistanTanzania, United Republic ofThailandTogoTokelauTongaTrinidad and TobagoTunisiaTurkeyTurkmenistanTurks and Caicos IslandsTuvaluUgandaUkraineUnited Arab EmiratesUnited KingdomUnited StatesUnited States Minor Outlying IslandsUruguayUzbekistanVanuatuVenezuelaVietnamVirgin Islands (British)Virgin Islands (U.S.)Wallis and Futuna IslandsWestern SaharaYemenYugoslaviaZambiaZimbabwe Email Me the Guide

</div> </div> </div>

</div> </div>

---

</div>

• cute angel

  Great article.

  </div> </li>
• peter

  Which editors work best on mobile devices?

• Wolf_22

  I’ve always used TinyMCE in my Drupal projects (and a few non-Drupal projects). I like it mostly because of its aesthetics and overall feel (it looks and behaves really well). I have to admit, however, that Froala looks really slick and professional. I wonder if it has the level of community support and contributions that TinyMCE does…?

  • Stefan

    I’m Stefan, co-founder at Froala. We offer tech support as part of the Advanced/OEM licenses by email and we usually answer within few hours. There is a great community for Angular, Ember and Rails plugins of the editor on Github and we’re currently working on a forum/Q&A solution for paid customers.

    For now, we don’t accept 3rd party contributions to the editor and we do all the development internally because it’s easier to prevent adding unwanted bugs this way. We usually make a new release each month and issues are solved in about 2 weeks from when they were reported.

    • Wolf_22

      Thanks for the information, Stefan. The editor really does look nice. You guys have done a great job with it.

    </ul> </li> </ul> </li>
    • M S i N Lund

      Which ones are free?

    </ul> </div> </div> </div>
    </div> </div>
    Recommended for you
    • Lazy-Loading Images: How Not to Really Annoy Your Users
    • 6 Web Development Myths about Microsoft Edge
    • Creating a SCRUD System Using jQuery, JSON and DataTables
    • 11 Best jQuery Charting Libraries
    • What’s New in jQuery 3.0 and How to Use It
    </div>
    Special Offer
    Free course!
    Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.
    </div>
    Get this deal
    </div> </div> </div> </div>
    </div>
    </div>
    </div>
    </div> </div>
    </div> </div> </div>
    来自： http://www.sitepoint.com/10-best-html-wysiwyg-plugins/
    相关资讯
    •  10个最好的 jQuery 和 HTML5 WYSIWYG 插件
    •  最新最好的jQuery插件集合
    •  最好的免费 jQuery 地图插件
    •  11个最好的Jquery和HTML5的在线HTML编辑器插件
    •  2015 年10个最好的 jQuery 画廊和滑块插件
    •  30 个最好的免费日历和日期选择jQuery插件
    •  15个最好的jQuery图像Slider插件和教程
    •  15+个最好的jQuery指示仪表，投票和图表插件
    •  10 个最好的免费JQuery导航和菜单插件
    •  20个最好的免费JQuery图片和内容滑块展示插件