Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Get Started

Looking for a Specific Framework Integration?

To find information on how to integrate Froala Editor in a new or an existing project, select your development framework from the list below:


Step 1: Include Froala JavaScript and StyleSheet Files

To use Froala Editor in your projects you need to add the required JavaScript and stylesheet files. You can download these files using one of options listed below, or you can use get the files from CDN.

Download Form

Fill out the download form to get the Zip archive, it contains the minified source code and lots of examples highlighting editor features.

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

Note: By registering, you confirm that you agree to the processing of your personal data by Froala, Inc. - Froala as described in the Privacy Statement. Froala, Inc. - Froala is part of the Idera group and may share your information with its parent company Idera, Inc., and its affiliates. For further details on how your data is used, stored, and shared, please review our Privacy Statement.


After downloading the ZIP archive, extract the required JS and CSS files, and include them in the editor. The following example shows how to add them to your project:
Note: Replace download-folder-path with the path to the folder containing the Froala files

<link href="download-folder-path/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="download-folder-path/froala_editor.pkgd.min.js"></script>

Use CDN

To include the required files hosted on CDN add the following code to your project:


<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />

<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>

The above example always loads the latest version of Froala Editor, alternatively, you can determine a specific version to use by replacing '@latest' in the above links with @{version-number} that you need to load. For instance, to load Froala Editor version 4.0.10 you should change the URLs to:


<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>

Use CDN as AMD

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:


<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/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/froala-editor@latest'
    }
});
</script>

Install From NPM

To install from NPM follow these steps:

  1. Create a new project using npm init
  2. Run the following command:
  3. npm install froala-editor
  4. After the installation process is finished, embed this code inside your HTML file:

    <link href="node_modules/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="node_modules/froala-editor/js/froala_editor.pkgd.min.js"></script>

Install From Bower

Run the following command:

bower install froala-wysiwyg-editor

After the installation process is finished, add this code to your HTML file:

<link href="bower_components/froala-wysiwyg-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="bower_components/froala-wysiwyg-editor/js/froala_editor.pkgd.min.js"></script>

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');

Load as a transpiled ES6/UMD 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 Install from NPM.

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

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

Step 2: Create DOM Element

The Froala Editor is quite flexible and can be initialized to ‘attach’ to any standard HTML DOM element, such as a DIV, or a TEXTAREA. We recommend using a DIV element, which can be done as follows:

<div id="example"></div>

The “example” id ties the div element to the instance of the Froala Editor that will be initialized in the following step.

Step 3: Initialize the Editor

The last step consists of initializing the Froala Editor on our previously created empty element.

var editor = new FroalaEditor('#example');

Full Initialization Code Example

This is the summary of the above three steps.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href="node_modules/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

        <div id="example"></div>

        <script type="text/javascript" src="node_modules/froala-editor/js/froala_editor.pkgd.min.js"></script>
        <script> 
            var editor = new FroalaEditor('#example');
        </script>
    </body>

</html>

This is the summary of the above three steps.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href="bower_components/froala-wysiwyg-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

        <div id="example"></div>

        <script type="text/javascript" src="bower_components/froala-wysiwyg-editor/js/froala_editor.pkgd.min.js"></script>
        <script> 
            var editor = new FroalaEditor('#example');
        </script>
    </body>

</html>

This is the summary of the above three steps.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
        <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
    </head>

    <body>

        <div id="example"></div>

        <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>  
        <script> 
            var editor = new FroalaEditor('#example');
        </script>
    </body>

</html>

This is the summary of the above three steps.

<html>
<head>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/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/froala-editor@latest'
        }
    });
    </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('#example')
    });
    </script>
</body>

</html>

The following examples presumes you are using npm to install froala-editor, see Install from NPM.


In the HTML file
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
</head>

<body>

<div id="example"></div>

</body>

</html>

In the JS File

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

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

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

The following examples presumes you are using npm to install froala-editor, see Install from NPM.
In the HTML file

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
</head>

<body>

<div id="example"></div>

</body>

</html>

In the JS File

import FroalaEditor from 'froala-editor'

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

// Initialize editor.
new FroalaEditor('#example')
a full example is available in this Github Gist

This is the summary of the above three steps.
Note: Replace the {download-folder-path} with the path to the folder containing the Froala files

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
    <!--   
        Replace the {download-folder-path} in the following example with the path to the folder containing the stylesheet file e.g.
        ../css/froala_editor.pkgd.min.js
    -->
    <link href="{download-folder-path}/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="example"></div>

<!-- 
        Replace the {download-folder-path} with the path to the folder containing the JS file e.g.
             ../js/froala_editor.pkgd.min.js
-->
<script type="text/javascript" src="{download-folder-path}/froala_editor.pkgd.min.js"></script>

<script> 
//initialize the editor
var editor = new FroalaEditor('#example');
</script>
</body>

</html>

Save Uploaded Video, Images, and Files

Froala makes it simple to save uploaded files, images or videos on your server or on the cloud. For specific instructions on how to perform each of these tasks with the Froala editor in the most popular server-side languages, check out our detailed guides.

The Froala editor also has documentation on a multitude of server-side SDKs in many languages to ease your development process.

Displaying Content Outside of the Froala Editor

To preserve the look of the edited HTML outside of the rich text editor you have to include the following CSS files.

<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="../css/froala_style.min.css" rel="stylesheet" type="text/css" />

Also, you should make sure that you put the edited content inside an element that has the class fr-view.

<div class="fr-view">
Here comes the HTML edited with the Froala rich text editor.
</div>

What's Next

Finished the demo and looking to explore Froala further? Check out the resources below to learn even more about the powerful features of the Froala WYSIWYG editor!

Plugins


Plugins

Over 30 easy to install plugins that help you improve the editor.

Examples


Examples

Explore a variety of examples that show you the functionality in Froala HTML editor.

API


API

Learn about Froala API options, methods, and events.

Concepts


Concepts

Learn how to add elements and perform different operations.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1113481969" 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_1888754400" 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_567470608" 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>