Froala Editor alternatives and similar libraries
Based on the "Editors" category.
Alternatively, view Froala Editor alternatives based on common mentions on social networks and blogs.
-
quill
Quill is a modern WYSIWYG editor built for compatibility and extensibility. -
slate
A completely customizable framework for building rich text editors. (Currently in beta.) -
Quasar Framework
Quasar Framework - Build high-performance VueJS user interfaces in record time -
medium-editor
Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution. -
TOAST UI Editor
๐๐ Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. -
TinyMCE
The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular -
jsoneditor
A web-based tool to view, edit, format, and validate JSON -
CKEditor 5
Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing. -
SimpleMDE
A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking. -
bootstrap-wysiwyg
Tiny bootstrap-compatible WYSIWYG rich text editor. -
wysihtml5
Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles. -
bootstrap-wysihtml5
Simple, beautiful wysiwyg editor -
Trumbowyg
A lightweight and amazing WYSIWYG JavaScript editor under 10kB -
EpicEditor
EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more. For developers, it offers a robust API, can be easily themed, and allows you to swap out the bundled Markdown parser with anything you throw at it. -
ContentTools
A JS library for building WYSIWYG editors for HTML content. -
jquery-notebook
A modern, simple and elegant WYSIWYG rich text editor. -
Mobiledoc Kit
A toolkit for building WYSIWYG editors with Mobiledoc -
ckeditor-releases
Official distribution releases of CKEditor 4. -
Monod
:notebook: Our cool, secure, and offline-first Markdown editor. -
Materio Free Vuetify VueJS Admin Template
Production Ready, Carefully Crafted, Extensive Vuetifty Free Admin Template ๐คฉ -
Bangle.dev
Collection of higher level rich text editing tools. It powers the local only note taking app https://bangle.io -
esprima
ECMAScript parsing infrastructure for multipurpose analysis -
walker.js
Simple & lightweight tracking implementation layer based on attributes -
URL Parser
Super fast spec-compliant URL state machine for Node.js -
ppo
ppo is a super small and useful utils library for JavaScript ๐๐ -
Zepcode
โ๏ธ Zeplin extension that generates Swift snippets from colors, fonts, and layers -
#<Sawyer::Resource:0x00007fbac98da410>
Basic operations on iterables -
React Chat UI
Build your own chat UI with React components in a few minutes. Chat UI Kit from minchat.io is an open source UI toolkit for developing web chat applications. -
convert-plain-text-into-links
An npm module which replaces any plain text link within string with achor tag -
react-component-widget
Component for resizing and repositioning charts, parsing transferred data when working with Recharts library.
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Froala Editor or a related project?
README
Froala Editor V4
Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever.
- 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.
<!-- Include Editor style. -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[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>
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
- 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.
*Note that all licence references and agreements mentioned in the Froala Editor README section above
are relevant to that project's source code only.