npmpackage.info

froala-editor

Froala wysiwyg editor release

4.3.1

NOASSERTION

HTML

130.12 kB

34,996,300 3

Installations

npm install froala-editor

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, UMD

Node Version

14.21.3

NPM Version

6.14.18 Score

97.4

Supply Chain

89.9

Quality

Maintenance

100

Vulnerability

87.1

License

Pull Requests

Open

0

Total

1

Closed

1

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 16 contributors

Languages

HTML

CSS

PHP

HTML (50.11%)

CSS (45.43%)

PHP (4.46%)

Developer

froala

Download Statistics

Total Downloads

34,996,300

Last Day

4,340

Last Week

170,176

Last Month

703,912

Last Year

8,367,625

GitHub Statistics

32 Stars

3,031 Commits

15 Forks

6 Watching

1 Branches

16 Contributors

Bundle Size

468.56 kB

Minified

130.12 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

4.3.1

Package Id

froala-editor@4.3.1

Unpacked Size

5.96 MB

Size

1.72 MB

File Count

262

NPM Version

6.14.18

Node Version

14.21.3

Publised On

18 Nov 2024

Total Downloads

Cumulative downloads

Total Downloads

34,996,300

Last day

9.4%

4,340

Compared to previous day

Last week

-6.6%

170,176

Compared to previous week

Last month

-10%

703,912

Compared to previous month

Last year

10.9%

8,367,625

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

No dependencies detected.

Versions

Froala Editor V4

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

WYSIWYG HTML Editor

Slim - only add the plugins that you need (30+ official plugins)
Client frameworks integrations
Server side SDKs for PHP, Node.JS, .NET, Java, and Python
Code is well commented
Online documentation 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
Great support - Help Center
Awesome new features

Demos

Basic demo: https://www.froala.com/wysiwyg-editor
Inline demo: https://www.froala.com/wysiwyg-editor/inline
Full list: https://www.froala.com/wysiwyg-editor/examples

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.

1<!-- Include Editor style. -->
2<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
3
4<!-- Create a tag that we will use as the editable area. -->
5<!-- You can use a div tag as well. -->
6<textarea></textarea>
7
8<!-- Include Editor JS files. -->
9<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
10
11<!-- Initialize the editor. -->
12<script>
13  new FroalaEditor('textarea');
14</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.

1<html>
2<head>
3  <!-- Load CSS files. -->
4  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.css">
5
6  <script src="require.js"></script>
7  <script>
8    require.config({
9      packages: [{
10        name: 'froala-editor',
11        main: 'js/froala_editor.min'
12      }],
13      paths: {
14        // Change this to your server if you do not wish to use our CDN.
15        'froala-editor': 'https://cdn.jsdelivr.net/npm/froala-editor@latest'
16      }
17    });
18  </script>
19
20  <style>
21    body {
22      text-align: center;
23    }
24    div#editor {
25      width: 81%;
26      margin: auto;
27      text-align: left;
28    }
29    .ss {
30      background-color: red;
31    }
32  </style>
33</head>
34
35<body>
36  <div id="editor">
37    <div id='edit' style='margin-top:30px;'>
38    </div>
39  </div>
40
41  <script>
42    require([
43      'froala-editor',
44      'froala-editor/js/plugins/align.min'
45    ], function(FroalaEditor) {
46      new FroalaEditor('#edit')
47    });
48  </script>
49</body>
50
51</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.

1var FroalaEditor = require('froala-editor');
2
3// Load a plugin.
4require('froala-editor/js/plugins/align.min');
5
6// Initialize editor.
7new 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.

1import FroalaEditor from 'froala-editor'
2
3// Load a plugin.
4import 'froala-editor/js/plugins/align.min.js'
5
6// Initialize editor.
7new FroalaEditor('#edit')

For more details on customizing the editor, please check the editor documentation.

Use with your existing framework

Angular JS: https://github.com/froala/angular-froala
Angular 2: https://github.com/froala/angular2-froala-wysiwyg
Aurelia: https://github.com/froala/aurelia-froala-editor
CakePHP: https://github.com/froala/wysiwyg-cake
Craft 2 CMS: https://github.com/froala/Craft-Froala-WYSIWYG
Craft 3 CMS: https://github.com/froala/Craft-3-Froala-WYSIWYG
Django: https://github.com/froala/django-froala-editor
Ember: https://github.com/froala/ember-froala-editor
Knockout: https://github.com/froala/knockout-froala
Meteor: https://github.com/froala/meteor-froala
Ruby on Rails: https://github.com/froala/wysiwyg-rails
React JS: https://github.com/froala/react-froala-wysiwyg/
Reactive: https://github.com/froala/froala-reactive
Symfony: https://github.com/froala/KMSFroalaEditorBundle
Vue JS: https://github.com/froala/vue-froala-wysiwyg/
Yii2: https://github.com/froala/yii2-froala-editor
Wordpress: https://github.com/froala/wordpress-froala-wysiwyg

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

Demo: www.froala.com/wysiwyg-editor
Download Page: www.froala.com/wysiwyg-editor/download
Documentation: froala.com/wysiwyg-editor/docs
License Agreement: www.froala.com/wysiwyg-editor/terms
Support: wysiwyg-editor.froala.help
Roadmap & Feature Requests: https://wysiwyg-editor-roadmap.froala.com
Issues Repo guidelines

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

In order to use the Froala Editor you have to purchase one of the following licenses according to your needs. You can find more about that on our website on the pricing plan page.

Stable Version

4.3.1

MODERATE

6.1/10

Summary

Cross site scripting in froala-editor

Affected Versions

<= 4.0.6

Patched Versions

4.0.11

MODERATE

6.1/10

Summary

DOM-based cross-site scripting in Froala Editor

Affected Versions

< 3.2.3

Patched Versions

3.2.3

MODERATE

6.1/10

Summary

Cross-site Scripting in Froala Editor

Affected Versions

<= 3.2.6

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

9

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

Score

3

/10

Last Scanned on 2024-12-16

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to froala-editor

vue-froala-wysiwyg

4.3.1

Vue plugin for Froala WYSIWYG HTML rich text editor.

react-froala-wysiwyg

4.3.1

React component for Froala WYSIWYG HTML rich text editor.

ember-froala-editor

4.3.1

An ember-cli addon that properly wraps the Froala WYSIWYG Editor for use in Ember.js

aurelia-froala-editor

4.3.1

Aurelia plugin for Froala WYSIWYG HTML rich text editor.