PHPackages froala/wysiwyg-editor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. froala/wysiwyg-editor ActiveComponent[Utility & Helpers](/categories/utility) froala/wysiwyg-editor ===================== A beautiful jQuery WYSIWYG HTML rich text editor. High performance and modern design make it easy to use for developers and loved by users. v5.2.0(1mo ago)5.4k320.3k↓15.6%1[380 issues](https://github.com/froala/wysiwyg-editor/issues)[40 PRs](https://github.com/froala/wysiwyg-editor/pulls)3proprietaryCSS Since Oct 19Pushed 4w ago3 watchersCompare [ Source](https://github.com/froala/wysiwyg-editor)[ Packagist](https://packagist.org/packages/froala/wysiwyg-editor)[ Docs](https://www.froala.com/wysiwyg-editor)[ RSS](/packages/froala-wysiwyg-editor/feed)WikiDiscussions master Synced 2d ago READMEChangelog (10)DependenciesVersions (103)Used By (3)Security (4) [Froala Editor V5](https://www.froala.com/wysiwyg-editor) ========================================================= [](#froala-editor-v5) [![Build Status](https://camo.githubusercontent.com/f77ade594ed3fa9bc9b26793ffa2f64e640088effbf7d8719313a74803059afa/68747470733a2f2f6170692e7472617669732d63692e636f6d2f66726f616c612d6c6162732f66726f616c612d656469746f722d6a732d322e7376673f746f6b656e3d526d69795737416563447951386a6137564d446a266272616e63683d6d6173746572)](https://travis-ci.com/froala-labs/froala-editor-js-2)[![npm](https://camo.githubusercontent.com/15441441776976b5b9e2061f0c4da9f17e61c644b70d69da8f8a7741a8363dcf/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f66726f616c612d656469746f722e737667)](https://www.npmjs.com/package/froala-editor)[![npm](https://camo.githubusercontent.com/a9a2ba67480dd147cb9e8514669d562b8ed4d2861280ed1714dff405b731c401/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f66726f616c612d656469746f722e737667)](https://www.npmjs.com/package/froala-editor) Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever. [![WYSIWYG HTML Editor](https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg)](https://raw.githubusercontent.com/froala/wysiwyg-editor/master/editor.jpg) - Slim - only add the plugins that you need ([30+ official plugins](https://www.froala.com/wysiwyg-editor/docs/plugins)) - [Client frameworks integrations](https://www.froala.com/wysiwyg-editor/docs/framework-plugins/) - Server side SDKs for [PHP](https://www.froala.com/wysiwyg-editor/docs/sdks/php), [Node.JS](https://www.froala.com/wysiwyg-editor/docs/sdks/nodejs), [.NET](https://www.froala.com/wysiwyg-editor/docs/sdks/dotnet), [Java](https://www.froala.com/wysiwyg-editor/docs/sdks/java), and [Python](https://www.froala.com/wysiwyg-editor/docs/sdks/python) - Code is well commented - [Online documentation](https://www.froala.com/wysiwyg-editor/docs) up to date - Simple to extend - the plugins are all well commented and simple to use as a basis for your own plugins - Well maintained - [frequent releases](https://www.froala.com/wysiwyg-editor/changelog) - Great support - [Help Center](https://wysiwyg-editor.froala.help) - Awesome [new features](https://wysiwyg-editor-roadmap.froala.com)​ Demos ----- [](#demos) - **Basic demo**: - **Inline demo**: - **Full list**: Download and Install Froala Editor ---------------------------------- [](#download-and-install-froala-editor) ### Install from npm [](#install-from-npm) ``` npm install froala-editor ``` ### Install from bower [](#install-from-bower) ``` bower install froala-wysiwyg-editor ``` ### Load from CDN [](#load-from-cdn) Using Froala Editor from CDN is the easiest way to install it and we recommend using the jsDeliver CDN as it mirrors the NPM package. ``` new FroalaEditor('textarea'); ``` ### Load from CDN as an AMD module [](#load-from-cdn-as-an-amd-module) Froala Editor is compatible with AMD module loaders such as RequireJS. The following example shows how to load it along with the Algin plugin from CDN using RequireJS. ``` require.config({ packages: [{ name: 'froala-editor', main: 'js/froala_editor.min' }], paths: { // Change this to your server if you do not wish to use our CDN. 'froala-editor': 'https://cdn.jsdelivr.net/npm/froala-editor@latest' } }); body { text-align: center; } div#editor { width: 81%; margin: auto; text-align: left; } .ss { background-color: red; } require([ 'froala-editor', 'froala-editor/js/plugins/align.min' ], function(FroalaEditor) { new FroalaEditor('#edit') }); ``` ### Load Froala Editor as a CommonJS Module [](#load-froala-editor-as-a-commonjs-module) Froala Editor is using an UMD module pattern, as a result it has support for CommonJS. *The following examples presumes you are using npm to install froala-editor, see Download and install FroalaEditor for more details.* ``` var FroalaEditor = require('froala-editor'); // Load a plugin. require('froala-editor/js/plugins/align.min'); // Initialize editor. new FroalaEditor('#edit'); ``` ### Load Froala Editor as a transpiled ES6/UMD module [](#load-froala-editor-as-a-transpiled-es6umd-module) Since Froala Editor supports ES6 (ESM - ECMAScript modules) and UMD (AMD, CommonJS), it can be also loaded as a module with the use of transpilers. E.g. Babel, Typescript. *The following examples presumes you are using npm to install froala-editor, see Download and install FroalaEditor for more details.* ``` import FroalaEditor from 'froala-editor' // Load a plugin. import 'froala-editor/js/plugins/align.min.js' // Initialize editor. new FroalaEditor('#edit') ``` For more details on customizing the editor, please check the editor [documentation](https://www.froala.com/wysiwyg-editor/docs). Use with your existing framework -------------------------------- [](#use-with-your-existing-framework) - Angular JS: - Angular 2: - Aurelia: - CakePHP: - Craft 2 CMS: - Craft 3 CMS: - Django: - Ember: - Knockout: - Meteor: - Ruby on Rails: - React JS: - Reactive: - Symfony: - Vue JS: - Yii2: - Wordpress: Browser Support --------------- [](#browser-support) At present, we officially aim to support the last two versions of the following browsers: - Chrome - Edge - Firefox - Safari - Opera - Internet Explorer 11 - Safari iOS - Chrome, Firefox and Default Browser Android Resources --------- [](#resources) - Demo: [www.froala.com/wysiwyg-editor](http://www.froala.com/wysiwyg-editor) - Download Page: [www.froala.com/wysiwyg-editor/download](https://www.froala.com/wysiwyg-editor/download) - Documentation: [froala.com/wysiwyg-editor/docs](https://www.froala.com/wysiwyg-editor/docs) - License Agreement: [www.froala.com/wysiwyg-editor/terms](https://www.froala.com/wysiwyg-editor/terms) - Support: [wysiwyg-editor.froala.help](https://wysiwyg-editor.froala.help/hc/en-us) - Roadmap & Feature Requests: - Issues [Repo guidelines](https://github.com/highcharts/highcharts/blob/master/repo-guidelines.md) Reporting Issues ---------------- [](#reporting-issues) We use GitHub Issues as the official bug tracker for the Froala WYSIWYG HTML Editor. Here are some advices for our users that want to report an issue: 1. Make sure that you are using the latest version of the Froala WYSIWYG Editor. The issue that you are about to report may be already fixed in the latest master branch version: . 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. A JSFiddle is always welcomed, and you can start from this [basic one](https://jsfiddle.net/froala/cgu0dmxh/). 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. Technical Support or Questions ------------------------------ [](#technical-support-or-questions) If you have questions or need help integrating the editor please [contact us](https://froala.com/contact/) instead of opening an issue. Licensing --------- [](#licensing) All plugins would be restricted for an unlicensed version. To try out the full functionality, you’ll need to register for a trial license [here](https://froala.com/get-trial-key/), which is valid for a limited time. To continue using the Froala Editor beyond the trial period, you’ll need to purchase a commercial license that suits your use case. For more details, visit our [pricing plan page](https://www.froala.com/wysiwyg-editor/pricing). This software includes open-source components. License information is available in the License file in the root folder. ### Health Score 68 — FairBetter than 99% of packages Maintenance90 Actively maintained with recent releases Popularity57 Moderate usage in the ecosystem Community26 Small or concentrated contributor base Maturity80 Battle-tested with a long release history Bus Factor1 Top contributor holds 75.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~34 days Total 102 Last Release 52d ago Major Versions v2.9.5 → v3.0.0-beta.12019-05-15 v2.9.6 → v3.0.62019-10-04 v2.9.8 → v3.2.02020-07-21 v3.2.7 → v4.0.02021-06-01 v4.7.1 → v5.0.02026-01-15 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/637004?v=4)[Stefan Neculai](/maintainers/stefanneculai)[@stefanneculai](https://github.com/stefanneculai) --- Top Contributors [![stefanneculai](https://avatars.githubusercontent.com/u/637004?v=4)](https://github.com/stefanneculai "stefanneculai (2407 commits)")[![froala-bot](https://avatars.githubusercontent.com/u/40001035?v=4)](https://github.com/froala-bot "froala-bot (477 commits)")[![diananeculai](https://avatars.githubusercontent.com/u/1551136?v=4)](https://github.com/diananeculai "diananeculai (130 commits)")[![florinpopescu](https://avatars.githubusercontent.com/u/1119443?v=4)](https://github.com/florinpopescu "florinpopescu (59 commits)")[![harasunu-narayan](https://avatars.githubusercontent.com/u/60644555?v=4)](https://github.com/harasunu-narayan "harasunu-narayan (43 commits)")[![iradustefan](https://avatars.githubusercontent.com/u/25457002?v=4)](https://github.com/iradustefan "iradustefan (25 commits)")[![SuyogKLP](https://avatars.githubusercontent.com/u/36469526?v=4)](https://github.com/SuyogKLP "SuyogKLP (18 commits)")[![lalitnarde-nitorinfotech](https://avatars.githubusercontent.com/u/45197446?v=4)](https://github.com/lalitnarde-nitorinfotech "lalitnarde-nitorinfotech (15 commits)")[![kapil2704](https://avatars.githubusercontent.com/u/47421622?v=4)](https://github.com/kapil2704 "kapil2704 (10 commits)")[![srkdev404-cyber](https://avatars.githubusercontent.com/u/232566029?v=4)](https://github.com/srkdev404-cyber "srkdev404-cyber (6 commits)")[![YoshiMannaert](https://avatars.githubusercontent.com/u/10230046?v=4)](https://github.com/YoshiMannaert "YoshiMannaert (1 commits)")[![bitmacs](https://avatars.githubusercontent.com/u/1202134?v=4)](https://github.com/bitmacs "bitmacs (1 commits)")[![gitter-badger](https://avatars.githubusercontent.com/u/8518239?v=4)](https://github.com/gitter-badger "gitter-badger (1 commits)")[![largeden](https://avatars.githubusercontent.com/u/5575931?v=4)](https://github.com/largeden "largeden (1 commits)")[![parull249](https://avatars.githubusercontent.com/u/103111355?v=4)](https://github.com/parull249 "parull249 (1 commits)")[![sh0e](https://avatars.githubusercontent.com/u/60368350?v=4)](https://github.com/sh0e "sh0e (1 commits)")[![andelf](https://avatars.githubusercontent.com/u/72891?v=4)](https://github.com/andelf "andelf (1 commits)") --- Tags froalajavascriptrich-text-editorwysiwygwysiwyg-editorwysiwyg-html-editorjavascripthtmljquerytexteditorwysiwygjquery-pluginrich-text-editorrterich editorfroalafroala-editorfroala-wysiwyg ### Embed Badge ![Health badge](/badges/froala-wysiwyg-editor/health.svg) ``` [![Health](https://phpackages.com/badges/froala-wysiwyg-editor/health.svg)](https://phpackages.com/packages/froala-wysiwyg-editor) ``` ### Alternatives [tinymce/tinymce Web based JavaScript HTML WYSIWYG editor control. 1708.1M121](/packages/tinymce-tinymce)[froala/wysiwyg-editor-php-sdk PHP SDK for Froala WYSIWYG Editor 441.5M](/packages/froala-wysiwyg-editor-php-sdk)[ckeditor/ckeditor JavaScript WYSIWYG web text editor. 5244.3M80](/packages/ckeditor-ckeditor)[unisharp/laravel-ckeditor JavaScript WYSIWYG web text editor (for laravel). 387766.8k5](/packages/unisharp-laravel-ckeditor)[froala/wysiwyg-cake A beautiful WYSIWYG text editor based on HTML5 technology. Cross browser, with mobile support, high performance and Retina Ready modern design. 1111.5k](/packages/froala-wysiwyg-cake)[w8tcha/ckeditor-wordcount-plugin WordCount Plugin for CKEditor Editor 77482.0k](/packages/w8tcha-ckeditor-wordcount-plugin) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)