🚀 DAY 5 OF LAUNCH WEEK: Introducing Socket Firewall Enterprise.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

froala-editor

Package Overview
Dependencies
Maintainers
1
Versions
133
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

froala-editor

The next generation Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.

latest
Source
npmnpm
Version
4.7.0
Version published
Weekly downloads
244K
49.69%
Maintainers
1
Weekly downloads
 
Created
Source

Froala Editor V4

Build Status npm npm

Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.

WYSIWYG HTML Editor

Demos

Download and Install Froala Editor

Install from npm

npm install froala-editor

Install from bower

bower install froala-wysiwyg-editor

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.

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

<!-- Create a tag that we will use as the editable area. -->
<!-- You can use a div tag as well. -->
<textarea></textarea>

<!-- Include Editor JS files. -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>

<!-- Initialize the editor. -->
<script>
  new FroalaEditor('textarea');
</script>

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.

<html>
<head>
  <!-- Load CSS files. -->
  <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('#edit')
    });
  </script>
</body>

</html>

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

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.

Use with your existing framework

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

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:

  • 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: https://github.com/froala/froala-wysiwyg/tree/master/js.
  • 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.
  • Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the editor please contact us instead of opening an issue.

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

This software includes open-source components. License information is available in the License file in the root folder.

Keywords

froala
froala-editor
froala-wysiwyg
html
text
editor

FAQs

Package last updated on 28 Oct 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

The Changelog Podcast: Practical Steps to Stay Safe on npm

Security News

The Changelog Podcast: Practical Steps to Stay Safe on npm

Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.

By Sarah Gooding  -  Oct 31, 2025