Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
froala-editor
Advanced tools
Readme
Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.
npm install froala-editor
bower install froala-wysiwyg-editor
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>
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>
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');
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.
At present, we officially aim to support the last two versions of the following browsers:
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:
If you have questions or need help integrating the editor please contact us instead of opening an issue.
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.
FAQs
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.
The npm package froala-editor receives a total of 88,083 weekly downloads. As such, froala-editor popularity was classified as popular.
We found that froala-editor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.