Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Download Froala Editor

Please read the License Agreement before using our rich text editor.

Download Version 3.1.0

ZIP Archive

The ZIP archive contains the minified source code and lots of examples highlighting editor features. Unzip the package and take a look over the Get Started Guide to create your first working demo.

The ZIP archive for the latest version (2.9.6) of the Froala rich text editor can be downloaded using the button at the top of the page. For older versions of the Javascript text editor, please check out our changelog.

Use CDN

Instead of downloading the editor you can use CDN to access the files directly. All files from our Get Started Guide are available on CDN and you can link to them like in the example below:

<!-- Include Editor style. -->
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.min.css' rel='stylesheet' type='text/css' />
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/froala_style.min.css' rel='stylesheet' type='text/css' />

<!-- Include JS file. -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.min.js'></script>

Install from NPM

Our JS rich text editor comes with NPM packages for multiple front-end frameworks. Here is an example of NPM usage:

npm install froala-editor@2.9.6

Install from Bower

Froala WYSIWYG HTML Editor can also be installed by using Bower as showed in the example below:

bower install froala-wysiwyg-editor@2.9.6

Use with Webpack

Froala Rich Text Editor can be used in modern build environments such as Webpack. The code below highlights the Webpack 4 configuration, while a full example is available in this Github Gist.

const path = require('path');
const webpack = require('webpack');


module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
modules: ['node_modules']
},
plugins: [
new webpack.ProvidePlugin({
 $: "jquery",
 jQuery: "jquery"
})
]
};

Receive update notifications

Subscribe to receive email notifications about new features and new releases for the Froala WYSIWYG HTML Editor.

Changelog

See changelog to keep track of what's new in the current version.

Client Frameworks

Froala Editor has plugins for the most popular development Frameworks.

Server SDKs

Froala WYSIWYG HTML Editor has multiple server SDKs to make the integration straight forward.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1491215098" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_744427063" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_511508318" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>