Download Froala WYSIWYG Editor

Try Froala Editor

Start your trial today and receive 30 days of FREE technical support to get you started.

Here are some benefits you'll get from using
Froala WYSIWYG Editor Trial:

30 days of Technical Support
Developer Friendly
Easy to Extend
Out of the Box Plugins

Fill out the form to download a free trial of Froala WYSIWYG HTML Editor.

All fields are required

Thousands have chosen Froala.

I just want to complement you all with an excellent piece of code! There are plenty free WYSIWYG editors around, but I just love Froala! It is easy to implement, has enough features, well coded and updated when needed. Good job you all!

— Dave Reedijk

We love all the recent updates. One of our customer JUST ASKED about a video upload option and we look like rockstars 🙂 Amazing work!
Your happy customer,

— Marybeth Alexander, CEO at KnowledgeOwl

Froala WYSIWYG Editor Installation Instructions

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

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

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:


<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />


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

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. See the example below:

<html>
<head>
  
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.css">

  <script src="require.js"></script>
  <script>
    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/[email protected]'
      }
    });
  </script>

  <style>
    body {
      text-align: center;
    }
    div#editor {
      width: 81%;
      margin: auto;
      text-align: left;
    }
    .ss {
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="editor">
    <div id='edit' style='margin-top:30px;'>
    </div>
  </div>

  <script>
    require([
      'froala-editor',
      'froala-editor/js/plugins/align.min'
    ], function(FroalaEditor) {
      new FroalaEditor('#edit')
    });
  </script>
</body>

</html>

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

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

Load 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 Install from NPM and install FroalaEditor.

var FroalaEditor = require('froala-editor');

// Load a plugin.
require('froala-editor/js/plugins/align.min');

// Initialize editor.
new FroalaEditor('#edit');

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 Install from NPM.

import FroalaEditor from 'froala-editor'

// Load a plugin.
import 'froala-editor/js/plugins/align.min.js'

// Initialize editor.
new FroalaEditor('#edit')

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: []
};

Try Froala Editor

Fill out the form to download a free trial of Froala WYSIWYG HTML Editor.

Thousands have chosen Froala.

Froala WYSIWYG Editor Installation Instructions

Install from Bower

Load as a CommonJS Module

WYSIWYG EDITOR

Design Blocks

Resources

Get In Touch

Sign Up

Try Froala Editor

Fill out the form to download a free trial of Froala WYSIWYG HTML Editor.

Thousands have chosen Froala.

Froala WYSIWYG Editor Installation Instructions

WYSIWYG EDITOR

Design Blocks

Resources

Get In Touch

Sign Up

Sign up